Static method is ideally better to be used as filter / action callback because it is easier to be added and removed. This is especially needed if third party plugin / theme might need to modify your registered callback for whatever reason:
Categories
Get Filename from URL using Javascript
Let’s say you have this URL:
http://wp.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wpand you want to get the filename, which is the jquery.js part. To do so:
const url = 'http://wp.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp';
// Returns 'jquery.js?ver=1.12.4-wp'
const filenameQuerystring = url.split('/').pop();
// Returns 'jquery.js'
const filename = filenameQuerystring.split('?').shift();If you have SVG used as CSS background and the background has fixed background-size defined using percentage so you can rendered it repeatedly for n time, the chance is you’ll have this unwanted spacing issue in webkit browser.
For example you have this wrapper:
<div class="wrapper"></div>Then you have this CSS:
.wrapper {
display: inline-block;
width: 600px;
height: 200px;
background: red;
/* repeat the image 7 times horizontally */
background-size:14.285714286% 70px;
/*Free Chevron Pattern SVG provided by SVGeez.com - CC 4.0 License - © 2019 Megan Young */
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill-opacity='1' style='enable-background:new 0 0 500 500'%3E%3Cstyle%3E .st1{fill:rgb(82, 230, 227)} %3C/style%3E%3Cpath style='fill:none;stroke:rgba(255,255,255,1);stroke-width:50;stroke-miterlimit:10' d='M-44-184l83 92 83-92 83 92 83-92 83 92 83-92 83 92 83-92'/%3E%3Cpath class='st1' d='M.8 500L-101 387.4l37.2-33.5L.8 425.4l83.1-92 83.2 92 83.2-92 83.1 92 83.2-92 83.2 92 64.6-71.5 37.2 33.5L499.8 500l-83.2-92-83.2 92-83.1-92-83.2 92-83.2-92zM.8 333.3L-101 220.7l37.2-33.4L.8 258.7l83.1-92 83.2 92 83.2-92 83.1 92 83.2-92 83.2 92 64.6-71.4 37.2 33.4-101.8 112.6-83.2-92-83.2 92-83.1-92-83.2 92-83.2-92zM.8 166.6L-101 54.1l37.2-33.5L.8 92 83.9 0l83.2 92 83.2-92 83.1 92 83.2-92 83.2 92 64.6-71.4 37.2 33.5-101.8 112.5-83.2-92-83.2 92-83.1-92-83.2 92-83.2-92z'/%3E%3C/svg%3E");
}You’ll have this unwanted spacing happens:
Categories
CSS’ :empty Selector
One of neat CSS Tricks that qualified as how on earth i just know about this recently is the :empty selector: As the name suggested, it is pseudo selector that selects empty DOM; perfect for hiding empty padding with particular selector that causes unwanted vertical space but somehow we don’t have control over DOM rendering.
I put a simple codepen page to showcase how it works:
See the Pen CSS :empty by Fikri Rasyid (@fikrirasyid) on CodePen.
I was recently stumbled upon issues that made me realize that context object was deprecated in jQuery 3.0. As I figured it out, I also figured what prevObject actually is.
NOTE:
selectorproperty is also deprecated in jQuery 3.0. That’s why WordPress stuck in jQuery 1.12 for backward compatibility reason. Bunch of things are deprecated in jQuery 2+ one simply doesn’t know when things will break if jQuery, which is highly used as dependency, gets updated.
context Property
Here’s an easy way to understand what context property is. Let’s say you have this:
console.log($('div'));The returned jQuery object instance:
{
0: div,
context: document,
length: 1,
selector: 'div',
}Most of the time, context will be current document unless you’re in event callback attached to other element like this:
$('div').on('click', 'h2', () => {
console.log($(this));
});If this is the case, the returned jQuery object instance will be:
{
0: h2,
context: div, // the context property
length: 1,
selector: '',
}Notice that the context is now element where the event callback is attached to.
prevObject Property
prevObject property is basically the jQuery object instance before the current selector object. Let’s say you do this:
console.log($('div').find('h2'));The returned jQuery object instance will be:
{
0: 'h2',
context: document,
length: 1,
prevObject: a.fn.init [h2],
selector: 'div h2',
}References
.contextAPI on jQuery docs.selectorAPI on jQuery docs- [StackOverflow] What is prevObject and why is my selector returning that?
Photo by Greg Rakozy on Unsplash
Categories
How to Check Database’s Column Charset
I recently stumbled upon encoding issue in WordPress where user’s site post_content column of wp_posts table still uses utf8 charset instead of utf8mb4 which makes saved content comparison against $_POST‘s post content check fails when there is an emoji used inside the post_content given.
Thus, here’s how to check what charset is used in given column in WordPress:
global $wpdb;
// Let's assume you want to check `post_content` column of `wp_posts`
// $charset value here is either `utf8` or `utf8mb4`
$charset = $wpdb->get_col_charset( $wpdb->posts, 'post_content' );As in why charset matters, here’s a quote of utf8 charset compared to utf8mb4 charsets:
The difference between
Source: https://make.wordpress.org/core/2015/04/02/the-utf8mb4-upgrade/utf8andutf8mb4is that the former can only store 3 byte characters, while the latter can store 4 byte characters. In Unicode terms,utf8can only store characters in the Basic Multilingual Plane, whileutf8mb4can store any Unicode character. This greatly expands the language usability of WordPress, especially in countries that use Han character sets. Unicode isn’t without its problems, but it’s the best option available.
There’s also larger story behind why this charset update matters: The Trojan Emoji.
Photo by Fikret tozak on Unsplash
So here’s the task at hand. Let’s say you want to wrap your posts on the main loop:
<div class="wrapper">
<!-- START WRAP HERE -->
<article class="post-1">
</article>
<article class="post-2">
</article>
<article class="post-3">
</article>
<!-- END WRAP HERE -->
</div>which is generated by this:
<div class="wrapper">
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<?php get_template_part(
'content',
get_post_format()
); ?>
<?php endwhile; ?>
</div>But you can’t modify the theme template because it won’t be feasible; What are your option? loop_start and loop_end.
loop_start
You can check out about loop_start at documentation here. I personally found it out while roaming around core code at https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-query.php#L3278.
loop_end
Similar to loop_start, read about loop_end documentation here. Again, i found it much easier to understand the context by seeing it on core code: https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-query.php#L3305
Example / Putting it together
To use it, you can do something like this at the theme’s functions.php:
function fr_wrap_main_loop_start() {
echo '<div class="custom-posts-wrap">';
}
add_action( 'loop_start', 'fr_wrap_main_loop_start' );
function fr_wrap_main_loop_end() {
echo '</div><!--- .custom-posts-wrap -->';
}
add_action( 'loop_end', 'fr_wrap_main_loop_end' );You’ll get something like:
<div class="wrapper">
<div class="custom-posts-wrap">
<article class="post-1">
</article>
<article class="post-2">
</article>
<article class="post-3">
</article>
</div><!--- .custom-posts-wrap -->
</div>Pretty neat 👌
***
Photo by DiEtte Henderson on Unsplash
I’ve been involved on Block Editor (Gutenberg) related project lately and one of the trick that I found useful the most is the fact that Block Editor’s data modules are exposed and accessible via browser console.
let’s say you want to checkout what selectors are available for core/block-editor data module. You can open browser console then type wp.data.select('core/block-editor'):
core/block-editor data moduleIf you execute any of them, it’ll return actual data of current editor state:
You can do the same with dispatcher. If you’re looking for what methods available on core/block-editor, you open browser and type wp.data.dispatch('core/block-editor').
Categories
Hello Again, World
It’s been a while since I posted here. The blog had quite some content when I created it but then I abandoned it for years. How do i know i abandoned it for years:
- Obviously from the last published post (last post was published at 2015.. 2015 is 4 years ago LOL)
- I got tons of update notifications on the dashboard
- I can’t even update this site to WordPress 5.2 😅
Regarding no. 3, If I recall correctly, i created the site using Digital Ocean’s one click installer which created droplet using pre-configured stack. Two important stack of them was:
- Ubuntu 14.04
- PHP 5.5.9
The fun thing is WordPress 5.2+ can only be installed if you have PHP 5.6. 😂
I’ve been trying to bump the PHP version on this Digital Ocean droplet but it kept failing miserably; Then this struck me: the site’s content is quite out of date. The posted article was relevant back then, but i don’t think how relevant it is for me right now. Couple of freebies i posted was relevant back then but then i stopped maintaining it and they’re no longer up to date. On top of that, manually managing droplet is annoying; I prefer the slightly more expensive but guaranteed to run stack using Cloudways.
Hence, let’s start new beginning. I figure i want to share and write more about stuffs I learned. I did it and it was fun, but several years back i couldn’t manage myself to do so. Thus, Let’s start over. I’m ditching the entire snapshot, spin new project + server + app at Cloudways because i don’t want to deal with managing the server, and start blogging again.
I made my blog at fikrirasyid.com well crafted with fancy custom design and super long content. Let’s share more technical and raw stuffs here.
Welcome aboard!
Photo by Eila Lifflander on Unsplash