A cute guide on z-index by Ahmad Shadeed.
Check it out: Understanding z-index in CSS
How to fix: “gyp: No Xcode or CLT version detected”
Just a quick heads up in case you run into this issue. I ran into this after upgrading to macOS Big Sur.
To fix it, run this in a terminal:
sudo rm -rf /Library/Developer/CommandLineTools xcode-select --install
After that, you’ll be prompted to install the command line tools and that should be it.
If that doesn’t work, in this link are a few other options.
px → rem
| px | rem |
|---|---|
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 23px | 1.4375rem |
| 24px | 1.5rem |
| 25px | 1.5625rem |
| 26px | 1.625rem |
| 27px | 1.6875rem |
| 28px | 1.75rem |
| 29px | 1.8125rem |
| 30px | 1.875rem |
| 31px | 1.9375rem |
| 32px | 2rem |
| 33px | 2.0625rem |
| 34px | 2.125rem |
| 35px | 2.1875rem |
| 36px | 2.25rem |
| 37px | 2.3125rem |
| 38px | 2.375rem |
| 39px | 2.4375rem |
| 40px | 2.5rem |
| 41px | 2.5625rem |
| 42px | 2.625rem |
| 43px | 2.6875rem |
| 44px | 2.75rem |
| 45px | 2.8125rem |
| 46px | 2.875rem |
| 47px | 2.9375rem |
| 48px | 3rem |
| 49px | 3.0625rem |
| 50px | 3.125rem |
| 51px | 3.1875rem |
| 52px | 3.25rem |
| 53px | 3.3125rem |
| 54px | 3.375rem |
| 55px | 3.4375rem |
| 56px | 3.5rem |
| 57px | 3.5625rem |
| 58px | 3.625rem |
| 59px | 3.6875rem |
| 60px | 3.75rem |
| 61px | 3.8125rem |
| 62px | 3.875rem |
| 63px | 3.9375rem |
| 64px | 4rem |
I always end up using some weird calculator, so this is a fast reference table.
Bookmark: https://blog.ign.uy/rem
How to extract attributes from an HTML string in PHP (without using RegEx)
Say you have an <a>, <link> or other HTML element and you need to extract its href (or other) attribute. You can extract those values using DOMDocument quite easily:
$custom_font = '<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">';
$link = $custom_font;
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadHTML($link);
foreach ($dom->getElementsByTagName("link") as $a) {
echo $a->getAttribute("href");
}- Link to Repl.it
- PHP: DOMDocument
Spoticalc – Spotify bandwidth calculator
Recently, we were wondering with a couple of friends how much data Spotify was sucking out of our cell phone data plans.
I knew that with a 3GB/mo. plan I could get away with most of my needs, but there was also streaming quality into the mix.
How to remove captions from Instagram embeds in WordPress
This is a simple code snippet to achieve just that in Instagram embeds, via shortcode or using Gutenberg.
function custom_instagram_settings($code){
if(strpos($code, 'instagr.am') !== false || strpos($code, 'instagram.com') !== false){ // if instagram embed
$return = preg_replace("@data-instgrm-captioned@", "", $code); // remove caption class
return $return;
}
return $code;
}
add_filter('embed_handler_html', 'custom_instagram_settings');
add_filter('embed_oembed_html', 'custom_instagram_settings');[instagram url=https://www.instagram.com/p/B1WjYcxCmHp/ hidecaption=true]
You can achieve the same effect in single embeds by using the following shortcode
[[instagram url=https://www.instagram.com/p/B1WjYcxCmHp/ hidecaption=true]]Here’s the result
[instagram url=https://www.instagram.com/p/B1WjYcxCmHp/ hidecaption=true]
YouTube
Use this snippet if you want to achieve a similar result wit YouTube embeds:
/* Youtube Videos remove show info related etc */
function custom_youtube_settings($code){
if(strpos($code, 'youtu.be') !== false || strpos($code, 'youtube.com') !== false){
$return = preg_replace("@src=(['\"])?([^'\">\s]*)@", "src=$1$2&cc_lang_pref=en&hl=en&showinfo=0&rel=0&autohide=1&modestbranding=1&iv_load_policy=3", $code);
return $return;
}
return $code;
}
add_filter('embed_handler_html', 'custom_youtube_settings');
add_filter('embed_oembed_html', 'custom_youtube_settings');Has this worked for you?
Found: on Reddit
Updating Laravel Homestead
(!) Notice: this post is probably outdated
Recently I needed to update my Homestead VM to a more recent version, because I needed to run PHP 7.2. While you can just update PHP on a current Homestead instance, I was using a very old Homestead version and wanted to update it.
Moreover, I wanted to make sure I could do that in case something went wrong sometime. Also, that meant I had to have everything backed up.
My first instinct was to check the official documentation. However, there are a few missing steps there, so I started googling and… StackOverflowing? around. I thought I put this into a post, so I can refer to it later:
Continue reading →
Enjoyable WordPress theming with Timber (and ACF)
I was thinking of doing an in-depth tutorial on Timber. A few days since I started a draft, CSS-Tricks published “Timber and Twig Reignited My Love for WordPress“, which is a great read. However, I decided to push some of it live because this plugin deserves more love.
I’ve built a lot of WordPress sites. Recently, it has become more tedious work for me. Not for their complexity —most of corporate sites are fairly straightforward—, but because of the amount of work you have to do in Spaghetti code.
This situation changed when I found two amazing plugins: ACF (Advanced Custom Fields) and of course, Timber. Continue reading →
Mac space running out? WhatsApp backup to iCloud may be the cause
A few weeks ago I noticed my Mac was running a bit low on disk space. It didn’t surprise me, since I have loads of RAW photos that take up massive amounts of space, and it’s a 256GB box.
However, since it hit around 15GB I’ve been keeping an eye on it. Since then, I’ve seen how almost on a daily basis the free space drops and drops…
If this situation sounds familiar to you, maybe you can find the solution here.
When it hit 10GB I started looking for an explanation. After examining with Disk Inventory X, I noticed that ~/Library/Caches folder was really fat. Fat as in ~40GB. You can browse directly to that folder by pressing CMD+Shift+G on Finder and entering ~/Library/Caches.
After further investigation, I found that folder com.apple.bird was the culprit, weighing around ~35GB.
Apparently that folder stores iCloud related stuff and you can delete it safely. I deleted it, but in a matter of weeks it got fat again. I had eradicated the symptom, but not the problem.
After searching the web again, I found an article¹ that shared the same concern. The theory is that the root problem is Whatsapp backup to iCloud. It’s not 100% proven, but after I disabled Whatsapp backups, the folder hasn’t grown again. Alternatively, I think you can enable weekly or monthly backups in Whatsapp.
Let me know in the comments if this has helped you or you have any clues on this topic.
[1] – Large com.apple.bird directory – Apple Support Communities
Laravel Homestead: multiple projects, one VM
Vagrant is great to isolate a development environment inside a VM. However, after a while you can find you have a bunch of heavy VMs that share the same characteristics, each one for a simple PHP project.
Enter Laravel Homestead
In these cases, you can safely use Laravel Homestead. Homestead is a Vagrant box pre-configured with an Nginx web server, PHP 5.6, MySQL, Postgres, Redis, Memcached, and other stuff to make development easier and faster.
The documentation is pretty clear and in a few steps you can have a working development environment, where you can add multiple projects.
Chek it out: Laravel Homestead
Update: Also, I recently found a simple guide on how to install MailCatcher on Homestead, which is really useful: Installing MailCatcher in Laravel Homestead