Helpful Gutenberg Articles

How to create a custom block for Gutenberg

Hot Module Replacement for Gutenberg Blocks

Gutenberg blocks visual constructor

Using React For WordPress Gutenberg Development

Working with Editor Styles in Gutenberg

Gutenberg Blocks in the Cloud

The Guten, the Berg, and the Ugly

Notes on Building a Site with Gutenberg

Register fields for Gutenberg blocks with less repetitive code

The Anatomy of Gutenberg Blocks in WordPress

Creating a Responsive Gutenberg Price Table

How to deprecate code in Gutenberg editor blocks

WordPress Gutenberg Block API: Creating Custom

Add Theme Color Palette to the Gutenberg Block Editor for WordPress

How to Make Your Plugin Compatible With Gutenberg using the Sidebar API

A Comprehensive Guide to the New Block Editor

How To Make Your Website Accessible Using Gutenberg

Integrating Gutenberg Blocks in Existing WordPress Plugins

How to enable Inner Blocks in your Gutenberg Block

Using Create Guten Block to Build a Gutenberg Ready Plugin with Multiple Blocks

How to Adapt Your Plugin for Gutenberg

15+ Best Gutenberg-Compatible Themes

Gutenberg Block Library

Sample Content Post for Testing Gutenberg

Automatically Create Color Palettes in Gutenberg and the Customizer

Enqueueing Scripts and Styles for Gutenberg Blocks

WordPress Gutenberg Blocks Example: Creating a Hero Image Block with Inspector Controls, Color Palette, and Media Upload

WordPress Gutenberg Blocks Made Easy

Building WordPress Gutenberg Blocks : The Complete Guide

WordPress Gutenberg Blocks: Setting up and enqueueing CSS in the editor and the view

Changing a shortcode to a dynamic Gutenberg block

Gutenberg Extensibility Workshop

Stackable adds the missing design blocks and options you need in the Gutenberg editor

Advanced Gutenberg is an enhancement of Gutenberg Editor

Atomic Blocks is a collection of content blocks for the new Gutenberg block editor

Gutenberg Custom Fields

A Gutenberg Vue Prototype

A Gutenberg compatible markdown editor. Write in Markdown, edit in Markdown and preview in HTML

Preparing WordPress themes for Gutenberg with the Block Unit Test

Learning Gutenberg Series

How to Add Customizer Colors to Gutenberg Block Color Palettes

The Ultimate Guide to Gutenberg Color Palettes and Color Classes

The Ultimate Guide to Gutenberg Image Alignments in WordPress Themes

Building Custom Gutenberg Blocks with the RichText Component

Building Dynamic Blocks for the Gutenberg Editor in WordPress

How to Disable Custom Colors in the Gutenberg Block Editor

Insert photos from unsplash.com directly inside your Gutenberg Editor

A suite of page builder Gutenberg blocks for publishers, writers and content marketers

WordPress Gutenberg Block API: Extending Blocks

20+ WordPress Gutenberg Editor Tips To Help You Work More Productively

Music: A Gutenberg-Powered Theme

How to Add JavaScript and CSS to Gutenberg Blocks

Gutenberg Migration Guide

Arrays, Attributes, and the Fundamental Flaw with Gutenberg

Designing Themes with Gutenberg Blocks and Sketch

Creating an editable field with Gutenberg Blocks

Disabling Gutenberg on certain templates

What Will Gutenberg Mean For My WooCommerce Store?

How To Get Started with Attributes in Gutenberg Blocks

How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes

How to Build a Gutenberg Block with Custom Styles

How to Convert a Shortcode to a Gutenberg Block

How to Build a Gutenberg Block with a Toolbar Control

Masonry Galleries & Gutenberg

Gutenberg Design Basics

Rendering Dynamic Gutenberg Blocks in Theme Template Parts

How to Use the Tooltip Component in Gutenberg

Gutenberg Best Practices for Blocks and Themes

Implementing Gutenberg Image Alignment Options into your Theme

Gutenberg Starter Theme

Understanding Gutenberg Blocks

Getting your theme ready for Gutenberg

Add Theme Color Palette to the WordPress Editor

Gutenberg Tutorials

How to build a Gutenberg block plugin

Examples for extending WordPress/Gutenberg with blocks

Use Gutenberg to create Feature Blocks

Gutenberg Courses

How to create a Gutenberg block for displaying a post

Example Gutenberg block with server-side rendering

Gutenberg React state example

Useful helpers, components or tools for building things with Gutenberg

A limited frontend preview of the Gutenberg editor

Gutenberg Block built with Vue.js

WordPress Gutenberg Boilerplate

Mapbox Map block for the Gutenberg

Gravity Forms block for Gutenberg

Gutenberg Stars Block

How to Build Custom Gutenberg Blocks: a Beginner’s Guide

A custom Gutenberg block for WordPress that displays a custom profile

Gutenberg Select Post – Duplicate Controls

Spacer Block for Gutenberg

Pricing tables for Gutenberg

How to add WordPress Theme Styles to Gutenberg

Vue Custom Element Gutenberg Block

A zero-configuration developer toolkit for building WordPress Gutenberg block plugins

Creating a custom Gutenberg block

Couple examples of blocks and How to save post meta into blocks

Beginners guide for building Gutenberg blocks

This list is my own personal revision of Chris McCoy’s gutenberg.txt gist. I’ve converted them all to hyperlinks for my convenience. You may wish to visit the original to see if any new ones have been added since the publication of this artice.

Count Down Closing Timer and dealing with DST in JavaScript

You can add these date prototypes to properly display the date and time in another location regardless of whether you are in DST or you or the destination observe DST

			Date.prototype.stdTimezoneOffset = function () {
				var jan = new Date(this.getFullYear(), 0, 1);
				var jul = new Date(this.getFullYear(), 6, 1);
				return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
			}

			Date.prototype.isDSTNow = function () {
				return this.getTimezoneOffset() < this.stdTimezoneOffset();
			}

			Date.prototype.isDSTObserved = function () {
				var jan = new Date(this.getFullYear(), 0, 1);
				var jul = new Date(this.getFullYear(), 6, 1);
				return jan.getTimezoneOffset() != jul.getTimezoneOffset();
			}

			Date.prototype.couldBeDST = function () {
				var d = new Date();
				var month = d.getMonth();
				var day = d.getDate();
				var dow = d.getDay();
				var previousSunday = day - dow;
				// January, February, and December are out.
				if (month < 3 || month > 11) { return false; }
				// April throuh October is in.
				if (month > 3 && month < 11) { return true; } // In March, we are DST if our previous sunday was on or after the 8th. if (month == 3) { return previousSunday >= 8; }
				// In November we must be before the first Sunday to be DST.
				// That means the previous Sunday must be in the previous month
				// aka less than/before the 1st.
				return previousSunday < 1;
			}

Full Code
This example takes an hours array with unique IDs and TZ info about a location and uses the current information to update the appropriate on screen timer every 1 second.

 
jQuery( document ).ready(function($) {
	var now = new Date();
	var weekday = new Array(7);
	var isOpen = function(hours,currentTime,offsetHours,locationHasDST,isDST,hasDSTLocal,couldBeDST){
			var result = false;
			if (hours == '') {
				return false;
			} else {
				hours.forEach( function(hourSet) {
					splitHours = hourSet.split(',');
					var isoDate = new Date(currentTime.getTime() - (currentTime.getTimezoneOffset() * 60000)).toISOString();
					var open = new Date(isoDate.substring(0, 10) + ' ' + splitHours[0]);
					var close = new Date(isoDate.substring(0, 10) + ' ' + splitHours[1]);
					var offsetSec = ( offsetHours * 60 * 60 ) + ( currentTime.getTimezoneOffset() * 60 );
					if (locationHasDST && !hasDSTLocal && couldBeDST) {	
						// eg Looking at EDT from AZ/MST
						// This is the one case here isDST and couldBeDST are not equal
						offsetSec = offsetSec - 3600;
					} else if (!locationHasDST && isDST && hasDSTLocal) {
						// Looking at EDT from AZ/MST 3 = (5) + (-7) + 1. So I need to take 3 more hours to count down timer.
						offsetSec = offsetSec + 3600;
					}

					if ((open.getTime() < (currentTime.getTime() + offsetSec*1000)) && ((currentTime.getTime() + offsetSec*1000 ) < close.getTime()))  {
						result = ((close.getTime() - currentTime.getTime())/1000) - offsetSec;
					}
				});
				return result;
			}
		}
	var checkTime = function(hours,offsetHours,locationHasDST) {
			Date.prototype.stdTimezoneOffset = function () {
				var jan = new Date(this.getFullYear(), 0, 1);
				var jul = new Date(this.getFullYear(), 6, 1);
				return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
			}

			Date.prototype.isDSTNow = function () {
				return this.getTimezoneOffset() < this.stdTimezoneOffset();
			}

			Date.prototype.isDSTObserved = function () {
				var jan = new Date(this.getFullYear(), 0, 1);
				var jul = new Date(this.getFullYear(), 6, 1);
				return jan.getTimezoneOffset() != jul.getTimezoneOffset();
			}

			Date.prototype.couldBeDST = function () {
				var d = new Date();
				var month = d.getMonth();
				var day = d.getDate();
				var dow = d.getDay();
				var previousSunday = day - dow;
				// January, February, and December are out.
				if (month < 3 || month > 11) { return false; }
				// April throuh October is in.
				if (month > 3 && month < 11) { return true; } // In March, we are DST if our previous sunday was on or after the 8th. if (month == 3) { return previousSunday >= 8; }
				// In November we must be before the first Sunday to be DST.
				// That means the previous Sunday must be in the previous month
				// aka less than/before the 1st.
				return previousSunday < 1; } var now = new Date(); var isDST = now.isDstObserved(); var today = weekday[now.getDay()]; var dayOfWeek = now.getDay(); var hour = now.getHours(); var minutes = now.getMinutes(); var today = weekday[now.getDay()]; //add AM or PM var suffix = hour >= 12 ? "PM" : "AM";

			// add 0 to one digit minutes
			if (minutes < 10) {
				minutes = "0" + minutes
			};
			
			hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15

			for (var curPostID in inHours ) {
				// Assign the needed variables while in scope.
				var timeDiv = document.getElementById('timeDiv-' + curPostID);
				var hours = inHours[curPostID][today];
				var offsetHours = inOffsetHours[curPostID];
				var hasDST = inObservesDST[curPostID]  == "yes";
				secondsLeft = isOpen(hours,now,offsetHours,hasDST,isDST);
				if (secondsLeft) {
					ooc = 'open';
					hours=Math.floor(secondsLeft/3600);
					min=Math.floor(secondsLeft/60)-hours*60;
					seconds=Math.floor(secondsLeft%60);
					var closingTime = hours + ':' + ("0" + min).slice (-2) + ':' + ("0" + seconds).slice (-2);

					timeDiv.innerHTML = 'YOUR MESSAGE';
				} else {
					ooc = 'closed';
					var closingIn = '(800) 288-1407';
					timeDiv.innerHTML = 'YOUR MESSAGE';
				}
				timeDiv.className = "timeDiv " + ooc;
				timeDiv.style.display = "block";
			}
			
		};

	/* MAIN CODE SECTION EXECUTED ON READY */
	// Populate the Weekday variable
	weekday[0] = "sunday";
	weekday[1] = "monday";
	weekday[2] = "tuesday";
	weekday[3] = "wednesday";
	weekday[4] = "thursday";
	weekday[5] = "friday";
	weekday[6] = "saturday";

	var posts = arrVars["arrHours"];

	for (var curPostID in posts ) {
		var currentDay = weekday[now.getDay()];
		var currentDayID = "#" + currentDay + '-' + curPostID; //gets todays weekday and turns it into id

		// All of the setup is now complete.  Now do the work.

		$(currentDayID).toggleClass("today"); //hightlights today in the view hours modal popup

		var iDay;
		var i=10;
		for (iDay = 0; iDay < 7; iDay++) { var loopDay = weekday[iDay]; var loopDayTimeDiv = "#" + loopDay + '-' + curPostID + ' div.time'; var loopHours = arrVars["arrHours"][curPostID][loopDay]; if (loopHours == '') { hoursString = "Closed"; } else { var hoursString = ''; loopHours.forEach(function(hoursSet){ hoursSet = hoursSet.replace(/ AM/g,'am'); hoursSet = hoursSet.replace(',',' - '); hoursSet = hoursSet.replace(/ PM/g,'pm'); if (hoursString > '') hoursString += '
';
				hoursString += hoursSet;
				});
			}
			$(loopDayTimeDiv).html(hoursString);
		}

	}

	setInterval( function(){
			checkTime(arrVars["arrHours"],arrVars["offsetHours"],arrVars["observesDST"])
		}, 1000);

});

});

Every chmod permission converted from numeric & displayed in ls style

chmod 0
———-
chmod 1
———x
chmod 2
——–w-
chmod 3
——–wx
chmod 4
——-r–
chmod 5
——-r-x
chmod 6
——-rw-
chmod 7
——-rwx
chmod 10
——x—
chmod 11
——x–x
chmod 12
——x-w-
chmod 13
——x-wx
chmod 14
——xr–
chmod 15
——xr-x
chmod 16
——xrw-
chmod 17
——xrwx
chmod 20
—–w—-
chmod 21
—–w—x
chmod 22
—–w–w-
chmod 23
—–w–wx
chmod 24
—–w-r–
chmod 25
—–w-r-x
chmod 26
—–w-rw-
chmod 27
—–w-rwx
chmod 30
—–wx—
chmod 31
—–wx–x
chmod 32
—–wx-w-
chmod 33
—–wx-wx
chmod 34
—–wxr–
chmod 35
—–wxr-x
chmod 36
—–wxrw-
chmod 37
—–wxrwx
chmod 40
—-r—–
chmod 41
—-r—-x
chmod 42
—-r—w-
chmod 43
—-r—wx
chmod 44
—-r–r–
chmod 45
—-r–r-x
chmod 46
—-r–rw-
chmod 47
—-r–rwx
chmod 50
—-r-x—
chmod 51
—-r-x–x
chmod 52
—-r-x-w-
chmod 53
—-r-x-wx
chmod 54
—-r-xr–
chmod 55
—-r-xr-x
chmod 56
—-r-xrw-
chmod 57
—-r-xrwx
chmod 60
—-rw—-
chmod 61
—-rw—x
chmod 62
—-rw–w-
chmod 63
—-rw–wx
chmod 64
—-rw-r–
chmod 65
—-rw-r-x
chmod 66
—-rw-rw-
chmod 67
—-rw-rwx
chmod 70
—-rwx—
chmod 71
—-rwx–x
chmod 72
—-rwx-w-
chmod 73
—-rwx-wx
chmod 74
—-rwxr–
chmod 75
—-rwxr-x
chmod 76
—-rwxrw-
chmod 77
—-rwxrwx
chmod 100
—x——
chmod 101
—x—–x
chmod 102
—x—-w-
chmod 103
—x—-wx
chmod 104
—x—r–
chmod 105
—x—r-x
chmod 106
—x—rw-
chmod 107
—x—rwx
chmod 110
—x–x—
chmod 111
—x–x–x
chmod 112
—x–x-w-
chmod 113
—x–x-wx
chmod 114
—x–xr–
chmod 115
—x–xr-x
chmod 116
—x–xrw-
chmod 117
—x–xrwx
chmod 120
—x-w—-
chmod 121
—x-w—x
chmod 122
—x-w–w-
chmod 123
—x-w–wx
chmod 124
—x-w-r–
chmod 125
—x-w-r-x
chmod 126
—x-w-rw-
chmod 127
—x-w-rwx
chmod 130
—x-wx—
chmod 131
—x-wx–x
chmod 132
—x-wx-w-
chmod 133
—x-wx-wx
chmod 134
—x-wxr–
chmod 135
—x-wxr-x
chmod 136
—x-wxrw-
chmod 137
—x-wxrwx
chmod 140
—xr—–
chmod 141
—xr—-x
chmod 142
—xr—w-
chmod 143
—xr—wx
chmod 144
—xr–r–
chmod 145
—xr–r-x
chmod 146
—xr–rw-
chmod 147
—xr–rwx
chmod 150
—xr-x—
chmod 151
—xr-x–x
chmod 152
—xr-x-w-
chmod 153
—xr-x-wx
chmod 154
—xr-xr–
chmod 155
—xr-xr-x
chmod 156
—xr-xrw-
chmod 157
—xr-xrwx
chmod 160
—xrw—-
chmod 161
—xrw—x
chmod 162
—xrw–w-
chmod 163
—xrw–wx
chmod 164
—xrw-r–
chmod 165
—xrw-r-x
chmod 166
—xrw-rw-
chmod 167
—xrw-rwx
chmod 170
—xrwx—
chmod 171
—xrwx–x
chmod 172
—xrwx-w-
chmod 173
—xrwx-wx
chmod 174
—xrwxr–
chmod 175
—xrwxr-x
chmod 176
—xrwxrw-
chmod 177
—xrwxrwx
chmod 200
–w——-
chmod 201
–w——x
chmod 202
–w—–w-
chmod 203
–w—–wx
chmod 204
–w—-r–
chmod 205
–w—-r-x
chmod 206
–w—-rw-
chmod 207
–w—-rwx
chmod 210
–w—x—
chmod 211
–w—x–x
chmod 212
–w—x-w-
chmod 213
–w—x-wx
chmod 214
–w—xr–
chmod 215
–w—xr-x
chmod 216
–w—xrw-
chmod 217
–w—xrwx
chmod 220
–w–w—-
chmod 221
–w–w—x
chmod 222
–w–w–w-
chmod 223
–w–w–wx
chmod 224
–w–w-r–
chmod 225
–w–w-r-x
chmod 226
–w–w-rw-
chmod 227
–w–w-rwx
chmod 230
–w–wx—
chmod 231
–w–wx–x
chmod 232
–w–wx-w-
chmod 233
–w–wx-wx
chmod 234
–w–wxr–
chmod 235
–w–wxr-x
chmod 236
–w–wxrw-
chmod 237
–w–wxrwx
chmod 240
–w-r—–
chmod 241
–w-r—-x
chmod 242
–w-r—w-
chmod 243
–w-r—wx
chmod 244
–w-r–r–
chmod 245
–w-r–r-x
chmod 246
–w-r–rw-
chmod 247
–w-r–rwx
chmod 250
–w-r-x—
chmod 251
–w-r-x–x
chmod 252
–w-r-x-w-
chmod 253
–w-r-x-wx
chmod 254
–w-r-xr–
chmod 255
–w-r-xr-x
chmod 256
–w-r-xrw-
chmod 257
–w-r-xrwx
chmod 260
–w-rw—-
chmod 261
–w-rw—x
chmod 262
–w-rw–w-
chmod 263
–w-rw–wx
chmod 264
–w-rw-r–
chmod 265
–w-rw-r-x
chmod 266
–w-rw-rw-
chmod 267
–w-rw-rwx
chmod 270
–w-rwx—
chmod 271
–w-rwx–x
chmod 272
–w-rwx-w-
chmod 273
–w-rwx-wx
chmod 274
–w-rwxr–
chmod 275
–w-rwxr-x
chmod 276
–w-rwxrw-
chmod 277
–w-rwxrwx
chmod 300
–wx——
chmod 301
–wx—–x
chmod 302
–wx—-w-
chmod 303
–wx—-wx
chmod 304
–wx—r–
chmod 305
–wx—r-x
chmod 306
–wx—rw-
chmod 307
–wx—rwx
chmod 310
–wx–x—
chmod 311
–wx–x–x
chmod 312
–wx–x-w-
chmod 313
–wx–x-wx
chmod 314
–wx–xr–
chmod 315
–wx–xr-x
chmod 316
–wx–xrw-
chmod 317
–wx–xrwx
chmod 320
–wx-w—-
chmod 321
–wx-w—x
chmod 322
–wx-w–w-
chmod 323
–wx-w–wx
chmod 324
–wx-w-r–
chmod 325
–wx-w-r-x
chmod 326
–wx-w-rw-
chmod 327
–wx-w-rwx
chmod 330
–wx-wx—
chmod 331
–wx-wx–x
chmod 332
–wx-wx-w-
chmod 333
–wx-wx-wx
chmod 334
–wx-wxr–
chmod 335
–wx-wxr-x
chmod 336
–wx-wxrw-
chmod 337
–wx-wxrwx
chmod 340
–wxr—–
chmod 341
–wxr—-x
chmod 342
–wxr—w-
chmod 343
–wxr—wx
chmod 344
–wxr–r–
chmod 345
–wxr–r-x
chmod 346
–wxr–rw-
chmod 347
–wxr–rwx
chmod 350
–wxr-x—
chmod 351
–wxr-x–x
chmod 352
–wxr-x-w-
chmod 353
–wxr-x-wx
chmod 354
–wxr-xr–
chmod 355
–wxr-xr-x
chmod 356
–wxr-xrw-
chmod 357
–wxr-xrwx
chmod 360
–wxrw—-
chmod 361
–wxrw—x
chmod 362
–wxrw–w-
chmod 363
–wxrw–wx
chmod 364
–wxrw-r–
chmod 365
–wxrw-r-x
chmod 366
–wxrw-rw-
chmod 367
–wxrw-rwx
chmod 370
–wxrwx—
chmod 371
–wxrwx–x
chmod 372
–wxrwx-w-
chmod 373
–wxrwx-wx
chmod 374
–wxrwxr–
chmod 375
–wxrwxr-x
chmod 376
–wxrwxrw-
chmod 377
–wxrwxrwx
chmod 400
-r——–
chmod 401
-r——-x
chmod 402
-r——w-
chmod 403
-r——wx
chmod 404
-r—–r–
chmod 405
-r—–r-x
chmod 406
-r—–rw-
chmod 407
-r—–rwx
chmod 410
-r—-x—
chmod 411
-r—-x–x
chmod 412
-r—-x-w-
chmod 413
-r—-x-wx
chmod 414
-r—-xr–
chmod 415
-r—-xr-x
chmod 416
-r—-xrw-
chmod 417
-r—-xrwx
chmod 420
-r—w—-
chmod 421
-r—w—x
chmod 422
-r—w–w-
chmod 423
-r—w–wx
chmod 424
-r—w-r–
chmod 425
-r—w-r-x
chmod 426
-r—w-rw-
chmod 427
-r—w-rwx
chmod 430
-r—wx—
chmod 431
-r—wx–x
chmod 432
-r—wx-w-
chmod 433
-r—wx-wx
chmod 434
-r—wxr–
chmod 435
-r—wxr-x
chmod 436
-r—wxrw-
chmod 437
-r—wxrwx
chmod 440
-r–r—–
chmod 441
-r–r—-x
chmod 442
-r–r—w-
chmod 443
-r–r—wx
chmod 444
-r–r–r–
chmod 445
-r–r–r-x
chmod 446
-r–r–rw-
chmod 447
-r–r–rwx
chmod 450
-r–r-x—
chmod 451
-r–r-x–x
chmod 452
-r–r-x-w-
chmod 453
-r–r-x-wx
chmod 454
-r–r-xr–
chmod 455
-r–r-xr-x
chmod 456
-r–r-xrw-
chmod 457
-r–r-xrwx
chmod 460
-r–rw—-
chmod 461
-r–rw—x
chmod 462
-r–rw–w-
chmod 463
-r–rw–wx
chmod 464
-r–rw-r–
chmod 465
-r–rw-r-x
chmod 466
-r–rw-rw-
chmod 467
-r–rw-rwx
chmod 470
-r–rwx—
chmod 471
-r–rwx–x
chmod 472
-r–rwx-w-
chmod 473
-r–rwx-wx
chmod 474
-r–rwxr–
chmod 475
-r–rwxr-x
chmod 476
-r–rwxrw-
chmod 477
-r–rwxrwx
chmod 500
-r-x——
chmod 501
-r-x—–x
chmod 502
-r-x—-w-
chmod 503
-r-x—-wx
chmod 504
-r-x—r–
chmod 505
-r-x—r-x
chmod 506
-r-x—rw-
chmod 507
-r-x—rwx
chmod 510
-r-x–x—
chmod 511
-r-x–x–x
chmod 512
-r-x–x-w-
chmod 513
-r-x–x-wx
chmod 514
-r-x–xr–
chmod 515
-r-x–xr-x
chmod 516
-r-x–xrw-
chmod 517
-r-x–xrwx
chmod 520
-r-x-w—-
chmod 521
-r-x-w—x
chmod 522
-r-x-w–w-
chmod 523
-r-x-w–wx
chmod 524
-r-x-w-r–
chmod 525
-r-x-w-r-x
chmod 526
-r-x-w-rw-
chmod 527
-r-x-w-rwx
chmod 530
-r-x-wx—
chmod 531
-r-x-wx–x
chmod 532
-r-x-wx-w-
chmod 533
-r-x-wx-wx
chmod 534
-r-x-wxr–
chmod 535
-r-x-wxr-x
chmod 536
-r-x-wxrw-
chmod 537
-r-x-wxrwx
chmod 540
-r-xr—–
chmod 541
-r-xr—-x
chmod 542
-r-xr—w-
chmod 543
-r-xr—wx
chmod 544
-r-xr–r–
chmod 545
-r-xr–r-x
chmod 546
-r-xr–rw-
chmod 547
-r-xr–rwx
chmod 550
-r-xr-x—
chmod 551
-r-xr-x–x
chmod 552
-r-xr-x-w-
chmod 553
-r-xr-x-wx
chmod 554
-r-xr-xr–
chmod 555
-r-xr-xr-x
chmod 556
-r-xr-xrw-
chmod 557
-r-xr-xrwx
chmod 560
-r-xrw—-
chmod 561
-r-xrw—x
chmod 562
-r-xrw–w-
chmod 563
-r-xrw–wx
chmod 564
-r-xrw-r–
chmod 565
-r-xrw-r-x
chmod 566
-r-xrw-rw-
chmod 567
-r-xrw-rwx
chmod 570
-r-xrwx—
chmod 571
-r-xrwx–x
chmod 572
-r-xrwx-w-
chmod 573
-r-xrwx-wx
chmod 574
-r-xrwxr–
chmod 575
-r-xrwxr-x
chmod 576
-r-xrwxrw-
chmod 577
-r-xrwxrwx
chmod 600
-rw——-
chmod 601
-rw——x
chmod 602
-rw—–w-
chmod 603
-rw—–wx
chmod 604
-rw—-r–
chmod 605
-rw—-r-x
chmod 606
-rw—-rw-
chmod 607
-rw—-rwx
chmod 610
-rw—x—
chmod 611
-rw—x–x
chmod 612
-rw—x-w-
chmod 613
-rw—x-wx
chmod 614
-rw—xr–
chmod 615
-rw—xr-x
chmod 616
-rw—xrw-
chmod 617
-rw—xrwx
chmod 620
-rw–w—-
chmod 621
-rw–w—x
chmod 622
-rw–w–w-
chmod 623
-rw–w–wx
chmod 624
-rw–w-r–
chmod 625
-rw–w-r-x
chmod 626
-rw–w-rw-
chmod 627
-rw–w-rwx
chmod 630
-rw–wx—
chmod 631
-rw–wx–x
chmod 632
-rw–wx-w-
chmod 633
-rw–wx-wx
chmod 634
-rw–wxr–
chmod 635
-rw–wxr-x
chmod 636
-rw–wxrw-
chmod 637
-rw–wxrwx
chmod 640
-rw-r—–
chmod 641
-rw-r—-x
chmod 642
-rw-r—w-
chmod 643
-rw-r—wx
chmod 644
-rw-r–r–
chmod 645
-rw-r–r-x
chmod 646
-rw-r–rw-
chmod 647
-rw-r–rwx
chmod 650
-rw-r-x—
chmod 651
-rw-r-x–x
chmod 652
-rw-r-x-w-
chmod 653
-rw-r-x-wx
chmod 654
-rw-r-xr–
chmod 655
-rw-r-xr-x
chmod 656
-rw-r-xrw-
chmod 657
-rw-r-xrwx
chmod 660
-rw-rw—-
chmod 661
-rw-rw—x
chmod 662
-rw-rw–w-
chmod 663
-rw-rw–wx
chmod 664
-rw-rw-r–
chmod 665
-rw-rw-r-x
chmod 666
-rw-rw-rw-
chmod 667
-rw-rw-rwx
chmod 670
-rw-rwx—
chmod 671
-rw-rwx–x
chmod 672
-rw-rwx-w-
chmod 673
-rw-rwx-wx
chmod 674
-rw-rwxr–
chmod 675
-rw-rwxr-x
chmod 676
-rw-rwxrw-
chmod 677
-rw-rwxrwx
chmod 700
-rwx——
chmod 701
-rwx—–x
chmod 702
-rwx—-w-
chmod 703
-rwx—-wx
chmod 704
-rwx—r–
chmod 705
-rwx—r-x
chmod 706
-rwx—rw-
chmod 707
-rwx—rwx
chmod 710
-rwx–x—
chmod 711
-rwx–x–x
chmod 712
-rwx–x-w-
chmod 713
-rwx–x-wx
chmod 714
-rwx–xr–
chmod 715
-rwx–xr-x
chmod 716
-rwx–xrw-
chmod 717
-rwx–xrwx
chmod 720
-rwx-w—-
chmod 721
-rwx-w—x
chmod 722
-rwx-w–w-
chmod 723
-rwx-w–wx
chmod 724
-rwx-w-r–
chmod 725
-rwx-w-r-x
chmod 726
-rwx-w-rw-
chmod 727
-rwx-w-rwx
chmod 730
-rwx-wx—
chmod 731
-rwx-wx–x
chmod 732
-rwx-wx-w-
chmod 733
-rwx-wx-wx
chmod 734
-rwx-wxr–
chmod 735
-rwx-wxr-x
chmod 736
-rwx-wxrw-
chmod 737
-rwx-wxrwx
chmod 740
-rwxr—–
chmod 741
-rwxr—-x
chmod 742
-rwxr—w-
chmod 743
-rwxr—wx
chmod 744
-rwxr–r–
chmod 745
-rwxr–r-x
chmod 746
-rwxr–rw-
chmod 747
-rwxr–rwx
chmod 750
-rwxr-x—
chmod 751
-rwxr-x–x
chmod 752
-rwxr-x-w-
chmod 753
-rwxr-x-wx
chmod 754
-rwxr-xr–
chmod 755
-rwxr-xr-x
chmod 756
-rwxr-xrw-
chmod 757
-rwxr-xrwx
chmod 760
-rwxrw—-
chmod 761
-rwxrw—x
chmod 762
-rwxrw–w-
chmod 763
-rwxrw–wx
chmod 764
-rwxrw-r–
chmod 765
-rwxrw-r-x
chmod 766
-rwxrw-rw-
chmod 767
-rwxrw-rwx
chmod 770
-rwxrwx—
chmod 771
-rwxrwx–x
chmod 772
-rwxrwx-w-
chmod 773
-rwxrwx-wx
chmod 774
-rwxrwxr–
chmod 775
-rwxrwxr-x
chmod 776
-rwxrwxrw-
chmod 777
-rwxrwxrwx

How to create a WordPress compatible slug in MySQL

Sometimes it is convenient to import terms or posts into a WordPress database.  When you do, you may need to create a ‘slug’ column. To do this, I’ve modified a user defined function I found on StackOverflow or some similar site (possibly here: http://stackoverflow.com/questions/5409831/mysql-stored-function-to-create-a-slug/5410316 ).  That version had some bugs. So I fixed them.

Here is my final script to create the UDF slugify.

Usage: select slugify(name), name from externaldata;

 

CREATE DEFINER=`thecode`@`localhost` FUNCTION `slugify`(`dirty_string` VARCHAR(200)) RETURNS varchar(200) CHARSET latin1
DETERMINISTIC
BEGIN
DECLARE x, y , z Int;
Declare temp_string, allowed_chars, new_string VarChar(200);
Declare is_allowed Bool;
Declare c, check_char VarChar(1);

set allowed_chars = “abcdefghijklmnopqrstuvwxyz0123456789-“;
set temp_string = lower(dirty_string);

Select temp_string Regexp(‘&’) Into x;
If x = 1 Then
Set temp_string = replace(temp_string, ‘&’, ‘ and ‘);
End If;

Select temp_string Regexp(‘[^a-z0-9]+’) into x;
If x = 1 then
set z = 1;
While z <= Char_length(temp_string) Do
Set c = Substring(temp_string, z, 1);
Set is_allowed = False;
Set y = 1;
Inner_Check: While y <= Char_length(allowed_chars) Do
If (strCmp(ascii(Substring(allowed_chars,y,1)), Ascii(c)) = 0) Then
Set is_allowed = True;
Leave Inner_Check;
End If;
Set y = y + 1;
End While;
If is_allowed = False Then
Set temp_string = Replace(temp_string, c, ‘-‘);
End If;

set z = z + 1;
End While;
End If;

Select temp_string Regexp(“^-|-$|'”) into x;
If x = 1 Then
Set temp_string = Replace(temp_string, “‘”, ”);
Set z = Char_length(temp_string);
Set y = Char_length(temp_string);
Dash_check: While z > 1 Do
If Strcmp(SubString(temp_string, -1, 1), ‘-‘) = 0 Then
Set temp_string = Substring(temp_string,1, y-1);
Set y = y – 1;
Else
Leave Dash_check;
End If;
Set z = z – 1;
End While;
End If;

Repeat
Select temp_string Regexp(“–“) into x;
If x = 1 Then
Set temp_string = Replace(temp_string, “–“, “-“);
End If;
Until x <> 1 End Repeat;

Return temp_string;
END

Help Me with Discussing Banner Sizes for Responsive Sites

I posted sent this to a client asking about what the right banner image size is for a #WordPress site. Where am I off and could have improved it?

[..]
So when creating custom headers for sites that are responsive and will be seen on different sizes, there are really three basic approaches:

1. Resizing/Scaling – The whole image is always shown, but it resizes smaller on smaller screens. The end result of this is that the detail of the the image is lots and titles that are now 1/4 the original size and are unreadable.

2. Centered – Allows for a single image to be used that can be as wide enough for a large screen, but only the middle is shown. This means that the most important info, like the title, has to be in the middle 320 pixels. It will also result in Google yelling at you because you are serving a very wide image on phones with a very limited width screen. A variance of this is left justified with the same results.

3. Multiple images – Based upon the size of the screen, the best image is displayed to the reader. This can be combined with #2 to cover multiple dimensions with less of a penalty from really wide images.

As with everything else, the answer that involves the most work, is the best answer. So #3 is best way to go.

With your last image, I created a three images (attached) that had the spirit of the first image. The first was just resized to fit the 1280 width screen.

The common sizes are: (http://bit.ly/1IAL98z)
320 for iphone 3&4,
768 for ipads,
1080 new tablets,
1280 for desktops & newer

You could go NUTS creating images for all the different dimensions. Take a look at the second article in the links below and you can see how many “common” breakpoints there are. If you create a site with three banners 320, 768, 1280, I think that covers most of the basis, especially if the readable content is mostly centered and can fall off the edges without any loss of message.

Some good articles:
http://www.metaltoad.com/blog/device-chart-for-analytics-driven-responsive-web-design-planning
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints#pick-major-breakpoints-by-starting-small-then-working-up
https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints

How do you split a text field/textarea by line breaks?

Sometimes you want to provide a simple way for users to enter multiple values.  Perhaps the simplest way for the user is to understand is allow them to enter new values on each line.  Historically that’s how Internet Explorer allowed you to configure multiple home pages: 1 per line. It’s a tested method that works.

However, how do you then process the information?  There are lots of possiblitities, however I prefer an answer I found was posted back in 2011: Use preg_split().

preg_split( '/\r\n|[\r\n]/', $_POST[ 'yourtextarea' ], PREG_SPLIT_NO_EMPTY )

By using regex, this function will handle entries from various platforms. You don’t need to worry about whether is just a carriage return or just a linefeed or even both at the end of a line.  The split is handled nicely and you get an array returned. It will even, by adding an optional third parameter, ignore any blank lines.  Once you have your value returned, you can write the array out to an option record, or process it however you like.

Once you have the array loaded from your DB, how do you split it into multiple lines again? That’s simple: Use implode().

implode( "\n",  $myarray );

Hope that helps someone!

WordPress and NotePad++

I use NetDrive and NotePad++ to do my WordPress Development, but I’ve customized NPP slightly along the way.
I’ve added the following functions:
Alt-F3 – Search the WordPress codex for the word at the cursor in the editor (usually for filters and actions etc)
Alt-F5 – Look up the word at the cursor as a function on the WordPress Developer wiki (will show the source)
Alt-F6 – Look up the word at the cursor as a function in the WordPress codex (will include examples)

To do this I edited shortcuts.xml

You can edit this file by closing notepad++ and then hitting WindowsKey+R and pasting in: notepad %AppData%\Notepad++\shortcuts.xml
And pressing enter.

 <NotepadPlus>
 <InternalCommands>
 <Shortcut id="41014" Ctrl="no" Alt="no" Shift="yes" Key="116" />
 </InternalCommands>
 <Macros>
 <Macro name="Trim Trailing and save" Ctrl="no" Alt="yes" Shift="yes" Key="83">
 <Action type="2" message="0" wParam="42024" lParam="0" sParam="" />
 <Action type="2" message="0" wParam="41006" lParam="0" sParam="" />
 </Macro>
 </Macros>
 <UserDefinedCommands>
 <Command name="Launch in Firefox" Ctrl="yes" Alt="yes" Shift="yes" Key="88">firefox &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Launch in IE" Ctrl="yes" Alt="yes" Shift="yes" Key="73">iexplore &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Launch in Chrome" Ctrl="yes" Alt="yes" Shift="yes" Key="82">chrome &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Launch in Safari" Ctrl="yes" Alt="yes" Shift="yes" Key="70">safari &quot;$(FULL_CURRENT_PATH)&quot;</Command>
 <Command name="Get php help" Ctrl="no" Alt="yes" Shift="no" Key="112">http://www.php.net/$(CURRENT_WORD)</Command>
 <Command name="Google Search" Ctrl="no" Alt="yes" Shift="no" Key="113">http://www.google.com/search?q=$(CURRENT_WORD)</Command>
 <Command name="Codex Search" Ctrl="no" Alt="yes" Shift="no" Key="114">https://wordpress.org/search/$(CURRENT_WORD)</Command>
 <Command name="WP Developer Function" Ctrl="no" Alt="yes" Shift="no" Key="116">https://developer.wordpress.org/reference/functions/$(CURRENT_WORD)/</Command>
 <Command name="Codex Function" Ctrl="no" Alt="yes" Shift="no" Key="117">https://codex.wordpress.org/Function_Reference/$(CURRENT_WORD)</Command>
 <Command name="Open containing folder" Ctrl="no" Alt="no" Shift="no" Key="0">explorer $(CURRENT_DIRECTORY)</Command>
 <Command name="Open current dir cmd" Ctrl="no" Alt="no" Shift="no" Key="0">cmd /K cd /d $(CURRENT_DIRECTORY)</Command>
 <Command name="Open in another instance" Ctrl="no" Alt="yes" Shift="yes" Key="79">$(NPP_DIRECTORY)\notepad++.exe $(CURRENT_WORD) -nosession -multiInst</Command>
 </UserDefinedCommands>
 <PluginCommands />
 <ScintillaKeys />
</NotepadPlus>

 

How to find Joomla WordPress or Drupal version from Linux CLI

I was about to rewrite some of these queries again, and decided to google instead.  I found this page with them already written: http://kb.iweb.com/entries/29801848-Verifying-CMS-versions-on-multiple-websites

So this too gets stored away in my cave.  Enjoy:


WordPress version
:

Linux/cPanel:

find /home/*/public_html/ -type f -iwholename “*/wp-includes/version.php” -exec grep -H “\$wp_version =” {} \;

Linux/Plesk:

find /var/www/vhosts/*/httpdocs/ -type f -iwholename “*/wp-includes/version.php” -exec grep -H “\$wp_version =” {} \;

Windows/IIS (default path) with Powershell:

Get-ChildItem -Path “C:\inetpub\wwwroot\” -Filter “version.php” -Recurse | Select-String -pattern “\`$wp_version =”

 

Joomla! 1/2/3 version and release:

Linux/cPanel:

find /home/*/public_html/ -type f \( -iwholename ‘*/libraries/joomla/version.php’ -o -iwholename ‘*/libraries/cms/version.php’ -o -iwholename ‘*/libraries/cms/version/version.php’ \) -print -exec perl -e ‘while (<>) { $release = $1 if m/ \$RELEASE\s+= .([\d.]+).;/; $dev = $1 if m/ \$DEV_LEVEL\s+= .(\d+).;/; } print qq($release.$dev\n);’ {} \; && echo “-“

Linux/Plesk:

find /var/www/vhosts/*/httpdocs/ -type f \( -iwholename ‘*/libraries/joomla/version.php’ -o -iwholename ‘*/libraries/cms/version.php’ -o -iwholename ‘*/libraries/cms/version/version.php’ \) -print -exec perl -e ‘while (<>) { $release = $1 if m/ \$RELEASE\s+= .([\d.]+).;/; $dev = $1 if m/ \$DEV_LEVEL\s+= .(\d+).;/; } print qq($release.$dev\n);’ {} \; && echo “-“

 

Drupal version:

Linux/cPanel:

find /home/*/public_html/ -type f -iwholename “*/modules/system/system.info” -exec grep -H “version = \”” {} \;

Linux/Plesk:

find /var/www/vhosts/*/httpdocs/ -type f -iwholename “*/modules/system/system.info” -exec grep -H “version = \”” {} \;

 

Latest version information:

 

 

What does “Is this ok [y/d/N]:” mean?

When installing new software using yum, you will occasionally get the the option of “Is this ok [y/d/N]:”  Everyone knows recognizes Yes and No, but the option d may have thrown you for a loop.

“d” simply stands for download only.  If you were to do this from the commandline you’d use this:

yum –download-only

Occasionally this is useful if you are prepping a resource, like a thumb drive, with all of the RPMs that you standardly install.  You might also want to have the RPMs available for switching between versions of software.  I’m sure there are many more reasons too.

Hopefully this has answered your question.

Advanced Google Search Operators

Sometimes a simple Google search won’t do. Today I needed to find some malformed URLs in a site.   I couldn’t remember how to search for specific text in a URL.

I had a hard time finding the Google documentation of search commands this morning.  It I needed the allinurl: function.

I don’t want to have to search that hard again so here is the documentation in my Code Cave:

Search Service Search Operators
Web Search allinanchor:allintext:allintitle:allinurl:cache:define:filetype:id:inanchor:info:intext:intitle:inurl:link:related:site:
Image Search allintitle:allinurl:filetype:inurl:intitle:site:
Groups allintext:allintitle:author:group:insubject:intext:intitle:
Directory allintext:allintitle:allinurl:ext:filetype:intext:intitle:inurl:
News allintext:allintitle:allinurl:intext:intitle:inurl:location:source:
Product Search allintext:allintitle:

Source and additional information:  http://www.googleguide.com/advanced_operators_reference.html