Skip to content

Instantly share code, notes, and snippets.

View mikepenski's full-sized avatar

Mike mikepenski

5 followers · 19 following
View GitHub Profile
@mfehrenbach
mfehrenbach / chrome-device-dimensions.md
Last active October 11, 2025 11:19
Modern device dimensions for Chrome DevTools.

Modern Device Dimensions for Chrome DevTools

These are modern “Emulated Devices” (a.k.a. responsive dimensions) for Chrome DevTools’ Mobile Device Viewport Mode.

They are specifically Apple devices, subtracting for recent Safari UI (as in window.innerWidth/Height), and cleverly sorted with some dark-arts unicode shenanigans. (This glitchy, unloved portion of the tools sorts lexicographically, because of course it would.) Ergonomics!

 

Note

Updated June 2025 with some notes from folks below! TL;DR: use Vibranium!

@tallesairan
tallesairan / README.md
Created February 7, 2023 20:21
How to unpack .wpress archive files created by the All-in-one-Wp-Migration Wordpress plugin

How to unpack .wpress archive files created by the All-in-one-Wp-Migration Wordpress plugin

Recently I needed to download some files from a Wordpress installation where the client only gave me access to the admin dashboard. Fortunately the All-in-One WP Migration plugin was already installed, so I could take a quick backup of the whole site by downloading the installed plugins, theme and database. To my surprise downloading the backup from the All-in-One WP Migration plugin only gave me a single compressed migration.wpress file that any unpack tool refused to extract. A little web search brought me to a five year old tool called Wpress-Extractor but the provided binaries for MacOS refused to work because the package was already too old.

So I decided to rewrite this little helpful tool in Node.js to make it cross-platform compatible for Windows, MacOS and Linux.

Ok here it is: A simple 2-step tutorial how to extract a file with the .wpress extension on your computer:

  1. Step
@S1SYPHOS
S1SYPHOS / csv-functions.php
Created April 5, 2019 13:40
<?php
// CSV files > CSV file
function mergeCSV(array $input = [], string $output = '')
{
$count = 0;
foreach (glob($input) as $file) {
if (($handle = fopen($file, 'r')) !== false) {
@knolaust
knolaust / filter-gutenbergblocks-cpt.php
Last active August 6, 2024 02:32
Allow/disallow certain blocks for specific post types and custom post types in WordPress' Gutenberg Editor
<?php
/**
* Allowed Block Types Configuration
* Gist Keywords: wordpress, editor, gutenberg, blocks
*
* @category WordPress
* @author Knol Aust
* @version 1.0.0
* @description Limit the blocks allowed in Gutenberg for improved content control.
@mortennajbjerg
mortennajbjerg / Install WP CLI on Hetzner Managed Server
Created June 11, 2018 13:15
Install WP CLI on Hetzner Managed Server
mkdir ~/bin
mkdir ~/bin/wp-cli
cd ~/bin/wp-cli
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
echo "export COLUMNS" >> ~/.bashrc
echo "alias wp='php ~/bin/wp-cli/wp-cli.phar'" >> ~/.bashrc
echo "alias php='/usr/bin/php'" >> ~/.bashrc
source ~/.bashrc
echo "PATH=$HOME/bin:$PATH" >> ~/.bashrc
@S1SYPHOS
S1SYPHOS / svg-url.scss
Created February 17, 2018 23:54
SASS function to create an inline SVG url() source.
/*
* Replacing SVG strings in data-uri style situations
* by Jakob Erikson -- https://github.com/jakob-e
*
* http://codepen.io/jakob-e/pen/doMoML
*/
// Function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@alexmustin
alexmustin / form-content.html
Created February 4, 2018 21:31
WordPress AJAX Live Search of Post Title
<!-- // The HTML (could be part of page content) // -->
<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
<div id="datafetch">Search results will appear here</div>
@pirey
pirey / functions.php
Last active May 24, 2022 10:52
Wordpress `the_content` filter, for adding class to img element in the page content
<?php
// other stuff ...
// register our filter to the wordpress action 'the_content',
// it will then be called when we call the_content() from anywhere in our template
add_filter( 'the_content', 'add_classlist_to_img' );
function add_classlist_to_img( $content ) {
// used to detect img tag element
$locateElement = '/\<img.*?\/\>/';
@woraperth
woraperth / wp-get-youtube-thumb.php
Last active August 15, 2024 23:23
[WordPress] Get Youtube video thumbnail from URL & Set as Featured Image
// Get Youtube URL
$yturl = 'https://www.youtube.com/watch?v=HhAKNSsb4t4';
preg_match("/^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&\"'>]+)/", $yturl, $matches);
$video_id = $matches[1];
// Get Thumbnail
$file_headers = get_headers( 'http://img.youtube.com/vi/' . $video_id . '/maxresdefault.jpg' );
$is_404 = $file_headers[0] == 'HTTP/1.0 404 Not Found' || false !== strpos( $file_headers[0], '404 Not Found' );
$video_thumbnail_url = $is_404 ? 'http://img.youtube.com/vi/' . $youtube_id . '/maxresdefault.jpg' : 'http://img.youtube.com/vi/' . $video_id . '/hqdefault.jpg';
@lvl99
lvl99 / inline-svg-code.less
Created March 20, 2016 09:34
This mixin allows you to embed SVG code within CSS files using LESS. The techniques within this mixin relate to the insights found at CSS Tricks' article "Probably Don't Base64 SVG"
// Inline SVG code images in LESS CSS
// @author Matt Scheurich <[email protected]> (http://lvl99.com)
// Github: https://github.com/lvl99/less-inline-svg-code
.inline-svg-code( @code ) {
@-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
@-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
@-inline-svg-url: ~"url('@{-inline-svg-code}')";
}
// Basic Example