mfehrenbach

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!

Nest Hub Max? Come on. I dropped a bunch of devices that were older and/or close to these dimensions. It obviously doesn’t cover everything (sorry Android/Chrome), but offers a decent spread/increments for common 2023/2024 viewports.

S1SYPHOS

<?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

<?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

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

/*
 * 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

<!-- // 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

<?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

// 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

// 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

ozinepank

.img-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
}

.img-container img {
    position: absolute;
    top: 0;