WordPress.com Admin now in JavaScript

The WordPress.com development team has now moved development of the WordPress.com CMS admin to JavaScript.
Two articles to read:

Given the pervasiveness of WordPress and the size of the development community, I believe this is a watershed moment. Arguably web developers are now officially living in a JavaScript-driven world. Might this be the beginning of the end for PHP?

This chart of benefits from the WP developer article says it all. (Click to expand.)
WordPress.com advantages of new workflow
See this table listing the benefits of the new JavaScript workflow at WordPress.com.

How to Make OS X Yosemite Stop Adding a Number after my Computer’s Name

NOTE: Others in the Apple support forum linked below have reported that these steps do the trick for them. It does not seem to be working for me, however. How about for you?

Daily my MacBook gets a number (2), (3), or (4) added after its computer name. After running searches and culling through forums, I found a tip which seems to be working.

Apparently this can be cleared up by repairing disk permissions. Here are the recommended steps:

  1. In System Preferences > Sharing, remove the (2) [or whatever is extra; mine was iMac (2), so I removed the (2)
  2. Exit Preferences
  3. Shutdown
  4. Restart machine in Recovery mode (machine off, press and hold Command + R, power on, when Apple logo appears release keys) — may take a few minutes to boot (depends on machine generation/speed, RAM and such)
  5. Open Disk Utility
  6. Select the OS disk (mine was Macintosh HD; selected the ‘indented’ item)
  7. Run Verify Disk Permissions
  8. When finished run Repair Disk Permissions
  9. Restart

Source: Apple Support Communities Discussion Here — in the Oct 29 reply by farquaad

Delete 14,700+ Unfiltered “Approved” Spam Comments in WordPress using SQL

For some reason this blog had all of its discussion settings reset, and plugins turned off, on June 2, 2015.

Within a couple of weeks, the blog had accumulated nearly 15 thousand spam comments. These comments were obviously spam, but with Akismet and WP Spam Shield down, and my discussion settings reset — they all went right through and were immediately published.

Deleting 14,700+ comments a screen at a time was not going to work well.

Thanks to this helpful post by the folks at Cats Who Code, I found a much more efficient fix using SQL in PHPMyAdmin.

The steps:

1. Backup your database. (To be safe.)

2. Login to PHPMyAdmin.

3. Navigate to the desired database. (The main database for the blog.)

4. Select SQL, which allows you to run SQL queries.

5. Run a first query to select all comments after the date that everything went bad:

SELECT * FROM wp_comments
WHERE comment_date > '2015-06-01 00:00:00'

6. If you’ve selected them right, you should see the results in a table. Sort the results by date, in both directions, and review them to ensure they’re what you want to delete.

7. If so, then delete them using this SQL command:

DELETE FROM wp_comments 
WHERE comment_date > '2015-06-01 00:00:00'

A Bigger Better Bootstrap Book: Bootstrap Site Blueprints

Last year I published a little Bootstrap book. I immediately wanted to write a next, bigger one. To help me pull it off, I teamed up with my colleague Ian Whitley. We’ve written it. And it’s live.

We wrote the book for those who want to make use of Bootstrap without being constrained by it. Properly understood, Bootstrap is a tool — a truly excellent tool among other tools — meant to be used with a craftsman’s touch, toward an end defined by the craftsman, not by the tool.

Let’s break that down. If you’re like us, you want to:

1. Bootstrap your way to truly original designs.

You don’t want Bootstrap to define your design. “Built with Bootstrap” need not mean “looks like Bootstrap.”

2. Work directly with the LESS files.

Bootstrap’s LESS files are beautiful to behold. Through the course of these chapters, you’ll develop a truly modular workflow. You’ll use Bootstrap’s LESS files intentionally and selectively. And you’ll augment them with your own custom LESS files.

Even if you’re new to LESS, we would argue there’s no better way to learn than this. We’ll help you get from zero to serious fast.

(Nothing against SASS, by the way. We wrote the book before Bootstrap had an official SASS port.)

3. Leverage, then enhance, Bootstrap’s JavaScript.

Bootstrap comes equipped with JavaScript plugins for some of the most important and frequently used interface elements. We’ll walk you through the process of exerting detailed control over several of them. Beyond that, you may want to do additional things, such as add swipe interaction to the carousel for touch devices, animate the scrolling behavior for a single-page site, or add the PictureFill responsive image solution. We walk you through these things!

4. Optimize for performance.

While it is convenient to grab Bootstrap’s CSS and JavaScript from the online CDN, you realize that there are huge performance gains to be had by selecting only the styles and plugins you need and optimizing them for performance.

We walk you through a very manageable process for cutting things down to size. No more 120KB CSS files or 68KB JavaScript files. We’ll cut those numbers in half, or better, and we’ll work to keep the number of HTTP requests low.

Your sites will load faster. You’ll get better page speed results. Your users will be pleased.

5. Do the hard work to do good things well.

Bottom line: This book is for those willing to roll up their sleeves and dig into the guts of Bootstrap — the markup, the LESS, and the JavaScript — exerting thoughtful and careful control over the details — while creating mobile-first, user-friendly designs.

6. Oh, and Bootstrap yourself a custom WordPress theme!

I almost forgot to mention — we walk you through creating a custom WordPress theme based on the fantastic Roots Theme.

If you’re on board with these desires, this book is for you.

In the coming weeks, we’ll be supporting the book with helpful tips, recommendations, and code goodies. So stay tuned!


Bootstrap Site Blueprints
Packt Publishing, February 2014
Packt eBook (ePub, Kindle, PDF) or Print + eBundle
Buy Amazon paperback or Kindle edition

HTML5 Site Starter Templates

I’ve rounded up some HTML5 site starter templates to help you get up and running with a project quickly.

Bare Bones HTML5 Markup

Just the very basic HTML5 markup structure to get you started with a simple HTML5 page.

Get the GitHub Gist here

The HTML5 Bones Template

Ian Devlin has provided a nice little template that’s a bit more well rounded, including:

  • a richly commented template with helpful notes about key HTML5 elements
  • Google analytics code included
  • Normalize.css for cross-browser compatibility
  • A very basic style sheet with only a few fundamental styles
  • the HTML5 Shiv for IE 8 support

Get the HTML5 Bones Template on Github

The HTML5 Boilerplate

Probably the most well respected starter template on the planet, and for good reason. Includes more touches, including:

  • The Modernizr script for the HTML5 shiv PLUS robust browser feature detection
  • jQuery
  • and more

Visit the HTML5 Boilerplate Homepage

Initializr

Initializr goes further to help you custom configure a set of starter files. You can choose to include or exclude:

  • a basic mobile-first responsive CSS template
  • CSS from Twitter Bootstrap
  • respond.js to enable support for media queries in IE 8
  • jQuery
  • Modernizr
  • Apple Touch Icons
  • etc.

Visit the Initializr Homepage

Resolving Breakpoint Conflicts in Bootstrap 3

Subtitled: the importance of the @screen-__-max variables

While testing a design for my upcoming Bootstrap 3 book (stay tuned, it’s coming soon!), I discovered the importance of the @screen-xs-max variable, and by extension the other @screen-__-max variables.

In my case, I had three columns set up using the class col-sm-4. This would lay them out side by side horizontally when the viewport width is above the @screen-sm breakpoint (by default 768px).

col-sm-4 cleared and padded

Then they would shift to a single-column layout below that breakpoint.

HOWEVER, because each column contained a floating button, the blocks of content were not clearing each other when arranged vertically. Buttons were flowing beside headings, and so on.

col-sm-4 not clearing

Thus, for the narrow single-column layout, I needed to set up a rule to force the columns to clear floating elements above them. I also wanted to add some vertical padding between them.

Easy fix not so easy

Seemed easy: Set up a media query with max-width: @screen-sm, and set up rules to clear floats and add padding only under that query.

On initial testing (i.e., resizing my desktop browser window), this seemed to work great.

col-sm-4 cleared and padded

The problem: This left a 1px zone where the columns remained narrow while clearing one another and thus still stretching down the screen vertically.

I didn’t find this until testing on the iPad mini, whose window width falls exactly in this 1 pixel zone! This was what it looked like:

iPad Screen Small Breakpoint Broken

After a bit of consternation-laden thought, I revisited Bootstrap’s breakpoint variables … and realized I’d stumbled on the reason for the @screen-__-max variables.

You’ll find these lines in Bootstrap’s variables.less file:

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Note what these do: provide a breakpoint that is exactly 1px less than the next larger breakpoint — exactly what I needed to clear up this problem.

The problem and fix in LESS

Here are my LESS lines, with the original offending media query, now commented out and replaced with the new better one:

// @media (max-width: @screen-sm) { // BAD: conflicts 1px with col-sm in markup
@media (max-width: @screen-xs-max) { // GOOD: fits within col-sm in markup
  [class^="col"] { // set columns to clear floats and add padding
    clear: both;
    padding-bottom: 40px;
  }
}

That did it. Problem solved.

See it and test the difference in this Codepen.

Lessons Learned

  1. Even with Bootstrap 3’s powerful responsive grid, be sure to test breakpoints very carefully, and across devices, watching for 1px gaps.
  2. The @screen-__-max variables can be your friend!

See the relevant Bootstrap 3 docs here

Open a file in Sublime Text via OS X Terminal

If you’re working in Terminal and would like an efficient command to open a file in Sublime Text 2 — as in subl filename.html — here’s how to set it up.

I’ve now edited this post to begin with my favorite method, using an alias, then added a few more notes on creating handy aliases. Last is an alternative method which requires creating a symlink to Sublime Text’s own terminal connection.

Creating an Alias

This, for me, is the easiest method. We’ll create an alias for the basic Terminal command to open a file in Sublime Text 2, which would be: open -a Sublime Text 2 newfile.html

Here’s how to set up an alias so that you only have to type: subl filename.html

From Terminal …

1. Edit the bash profile, by typing:

vim .bash_profile

2. Then type i to insert.

3. Insert this line:

alias subl='open -a Sublime Text 2'

This creates a new shorter version of the longer command. Typing subl will do what’s after the equal sign!

4. Hit the **Escape** key to stop editing.

5. Type :wq to save and quit the editor.

6. Type exit to exit the terminal session.

7. Quit Terminal and restart it.

8. Type subl filename.html to open the desired file in Sublime Text!

To create more aliases, you can now do it by editing the .bash_profile in Sublime Text. Just type: subl .bash_profile

On the Topic of Aliases

Here are a few similar aliases I set up, by adding them to my .bash_profile, to efficiently open files in Firefox, Chrome, Safari, navigate to a frequently used directory, etc.

# Open a file in Sublime Text 2
alias subl='open -a Sublime Text 2'

#Edit Bash Profile in Sublime Text 2
alias bashprof='subl .bash_profile'

# Open a file in desired browser
alias ff='open -a Firefox'
alias chr='open -a Google Chrome'
alias saf='open -a Safari'

# Open file in Firefox, Chrome, and Safari
function testall { ff $1; chr $1; saf $1; }

# Shortcuts to directories
alias home='cd ~/'
alias nodeplay='cd ~/Nodeplay'
alias github='cd ~/Github'
alias sites='cd ~/Sites'

# Change to and list contents of a directory
function cdl { cd $1; ls; }

This Lifehacker post was helpful in the quest:
Become a Command Line Ninja With These Time-Saving Shortcuts – Lifehacker

Another Approach Using a Symlink

Back to the topic of opening a file in Sublime Text 2 — it’s amazing how diverse and confusing are the opinions on this topic. The alias approach (above) seems easiest (and least frequently mentioned). Here is another method that uses a symlink, for those who prefer it.

 

1. Create a directory named bin in your user home directory.

Create bin directory

Now we need to create a symlink in this new directory …

 

2. In Terminal, enter the following line and hit return:

ln -s /Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl ~/bin/subl

This creates a symlink called subl. You’ll see it in Finder inside your newly created bin directory.

Sublime Bin Symlink

Next to add this new directory path to your Terminal bash profile.

 

3. In Terminal, open the bash profile in the vim text editor:

vim .bash_profile

 

4. Then type i to insert:

i

 

5. Type this new export path at the cursor:

export PATH=$PATH:~/bin

Sublime Export Path

 

6. Now hit your keyboard’s Escape key to stop editing.

 

7. Save the file by typing :wq and pressing Return:

:wq

[Press Return]

 

8. Exit the terminal session by typing:

exit

 

9. Quit Terminal, then restart it.

 

10. If you need a quick file to test, you can create it via Terminal:

touch newfile.html

 

11. Now open your new file in Sublime Text by typing:

subl newfile.html

This should be your result!

Sublime File Opened

 

12. To change the command for opening a file in Sublime Text …

Simply change the name of the symlink in your bin directory. For instance, you could change the symlink name to sublime, and then type sublime newfile.html in Terminal to open your desired file.

Sublime Symlink Name Change

 

Spot an update?

Let me know if you spot anything that needs updating or clarification.

 

Credit

Piecing these steps together from available online resources took a bit of work.

Helpful bits can be found in the Sublime Text docs, and in this gist by artero.

Credit for piecing together a working combo goes to @piperseth.

Bootstrap 3 (RC1) is out! Tuts coming soon …

Huzzah!

At long last Bootstrap 3 is out — Release Candidate 1 that is. Read the blog post here.

Bootstrap 3 is a big deal. Some truly fantastic work has gone into it. Not least among the new touches — a new, more adept, mobile-first grid system.

I’m prepping a little introductory tutorial, which should be ready in the next few days. I hope to keep things going after that, with semi-regular tips and tricks for working with Bootstrap.

For those who enjoy working with Bootstrap in the context of the Roots Theme for WordPress, I’ve got some tuts in the works for you as well.

If that interests you, be sure to check back, and perhaps subscribe to receive updates.

Meanwhile, part of the reason I’ve been so quiet lately is that I’ve got a Bootstrap 3 book underway. My previous Bootstrap book was frankly too skinny. This one will be fatter, with blueprints for building a variety of types of websites using Bootstrap. I still have some writing, testing and revising to do. (So does Bootstrap 3 itself, during these two release candidate phases.) But I’ll be doing my best to get the book out as soon after the official release as possible!

Stay tuned.

Custom CSS = Love Trello More

Trello with custom CSS
My Trello with custom CSS, using the Safari User CSS extension

I love working with Trello. Compare the free and cheap project management tools out there, and Trello can compete. More nimble, dextrous, and powerful than most. For free.

Effective. Elegant. User-friendly. Excellent in most every area.

In beauty, though — it’s only passible.

Having just tried and compared many alternate services, I’ve come back more committed to Trello, and determined to enjoy it more as well.

So I’ve added some custom styles — and found my love has grown.

Of course this is largely a matter of preference. But I’ve knocked off corners and borders, made avatars round, added some white space, gone largely gray-scale — and, well, see for yourself.

Do it Yourself

If you like it or would like to innovate on it, here is a Gist of my styles.

You’ll need to add the styles to your favorite browser, as user styles made specific to the domain: https://trello.com.

To help with this, use a browser extension for your favorite browser.

Browser Extensions

Further Reading and Resources

Should you leave normalize.css as a separate file? (Nope.)

The HTML5 Boilerplate has recently separated out normalize.css, giving it a separate stylesheet link in its default template file. Should you leave it like this in your production site? Is there some caching or other gain? Nope. At least probably not.

Looking at the rationale, one finds this was done to help with maintenance and versioning of the H5BP code.

For production, the recommendation is still to roll up all your CSS, including normalize.css into one minified and compressed file.

Necolas points this out in the GitHub pull request on this issue:

Benefits of disentangling normalize.css from the rest of the project’s
CSS:

Easier to track normalize.css version.
Easier to update normalize.css.
Easier to remove normalize.css if the user wants.
Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides.
Drawback is the additional HTTP request incurred from the extra
stylesheet referenced in the HTML. However, we already do something
similar for the JS, and anyone serious about performance is going to
employ a build process to concatenate and minify CSS/JS.

Emphasis added.

Further Notes

  • HTML5 Bones also has normalize as a separate file.
  • As pervasive as normalize is becoming, this could become a new best practice …
  • But in terms of site performance there would need to be caching benefits to overcome the need for the extra HTTP request. If I understand how browsers decide when to use a cached file, the file would need to be sourced from the same online location — as the H5BP does with Google-hosted jQuery.