Month: October 2014

WordPress beautiful: Get a Cleaner Plugin Installer

Some days ago I found in my Twitter timeline a small tweet by David Decker, promoting his latest plugin: the Cleaner Plugin Installer. The idea grew in my mind to write a review about this plugin, because I found this idea most exceptional. I don’t like the plugin page in WordPress very much, but I would have never thought about a plugin to confront this – lets call it a “problem”. David did:

As of WordPress 4.0+, going to “Add Plugins” page and being welcomed by always the same old 6 featured plugin cards annoyed me big time! So I thought on how to change this default behavior. Due to WordPress’ genius Hooks & Filter functionality I could easily tweak this via my plugin.
David Decker

So today I scratch some time together to have a look into what the “Cleaner Plugin Installer” is all about. First I was a bit disappointed to be honest. I didn’t read too much about the plugin but just installed it and: Nothing happened – well, on my “Installed Plugins”-page (which is the page, I am a bit annoyed with). But Davids plugin is not about this page, it’s about the “Installer”-page itself, so, once you click “Add New” the magic starts to work.

Lets have a quick before/after screenshot, before we discuss the single features:
Plugin Installer Before and After

Instead of the six most popular plugins of WordPress or whatsoever, you get a huge search bar in order to search for your plugins. You can search by keyword, tag or author name. Above this search bar, you will find a tab navigation with the following possibilities:

  1. Search
  2. Topics
  3. Collections
  4. Newest
  5. Popular
  6. Favorites
  7. Search Results

Once, you hit the search button on the start page, you will be redirected to the “Search Results” page, where the found items are displayed. Via “Screen options”, like you now it them from your post editor, you can define, how many results will be shown per page.

Okay, I have to admit, the start page looks more beautiful. But what’s really compelling is behind the other tabs. If you go to “Topics”, you will find a list of tags, maintained by the plugin author himself. This is really nicely done. Ordered by “Topics” like “Content/Editor”, “Post Types/ Custom Taxonomies/ Custom Fields”, “Social/ Sharing”, “Developer” and others, you will find the tags, which fit to this topic. A very nice overview! And a click will redirect you to the search results again. For sure, this is one of the nicest ways to browse the WordPress repository so far!

The next tab “Collections” is totally awesome. Most of us are running again and again the same plugin installations for our clients. WordPress SEO by Yoast, ACF and so on… Cleaner Plugin Installer “cooperates” here with WPCore. After you’ve registered at WPCore, you can create your own collections. If you now install the WPCore Plugin, you can just “bulk”-install these collections. Unfortunately, right now, I can’t use this feature, since WPCore and my Theme Gubmo are using the same PHP Class “tgmpa_load_bulk_installer” and none of them is checking WPCore is not checking, whether this function might already exist:( Too bad, because this is a nice feature.

Anyway, lets proceed with the possibilities Cleaner Plugin Installer gives us. We can also have a look into the “Newest” and the “Most popular” plugins and we can check out our Favorite plugins (or the favorites of any other registered WordPress user) on WordPress. Deckerweb likes – well, if you know his blog, you don’t wonder – the “Genesis Toolbar Extras”-plugin, and of course websupporter likes his own WordPress Search Filter plugin. It would be interesting though to create a bulk installer for the favorites too, but this might just be a bit too much and roots in my disappointment about the WP Core plugin.

So, what to do now. Ah right, lets upload a plugin. Do you like the Media Uploader of WordPress. And you haven’t asked yourself yet, why you can’t drag and drop your plugins into your WordPress dashboard. Well – I did and the plugin author obviously also, because this is exactly what you can do now!

Upload a plugin

Is this nice or what? It is, and I just have one remark (this bulk uploader topic remains in my head): Unfortunately it doesn’t look like its possible to upload more than one plugin at a time. This would be a nice feature. I just create my “Standard plugins”-folder with all the Yoast, ACF and whatsoever plugins open it and drop all at once. But to drag and drop is already a very nice feature itself.

To sum it up: Although I don’t like the plugins page either, I would have never thought about writing a plugin to “Scratching My Own Itch”. Thanks to David Decker, I can now do so easily with a very nice small plugin, which you should try NOW. Changing the installer interface is changing the way you see plugins. They are even more beautiful now.

The Ultimative List of CSS Videos and Talks

CSS is the most powerful tool, when it comes to web design. And it has come a long way since it has been first released in 1996. Nowadays, with CSS3, you don’t work in a two-dimensional space anymore, but actually in a four-dimensional with z-axis and animations. Complex animations, which needed Javascript or Flash before, can now be realized using CSS. With media queries you are now able to style your website for different devices which boosted mobile responsive layout. And of course, we shouldn’t forget about the CSS frameworks which pop up since quite a while and help us in a lot of ways to speed up our work. Although, not covered in this roundup, but worth to be mentioned: SASS which was published in 2007 starts to change the way, we work and understand CSS itself.

But all these changes come of course with more complexity and nowadays with pseudoelements, new HTML5 elements, a variety of new selectors and so on, it can take some time to make use of all of these advantages. In this blog post, I want to gather my top ten CSS video tutorials, which helped me to understand and use CSS in a better way.

Contents

How to maintain CSS

In this section I gather videos, which approach the problems of maintaining CSS code. To do so is quite a common problem, since “CSS is a mess” as Jonathan Snook points out. This section gives you advice, how to create a modular and scalable CSS code, which you can more efficient and easily alter, to keep your layout up to date, include new sections into your webpage and so on.

CSS is a mess

Lets start with the problem, every one of us knows quite too well, nevermind how good or bad we understand CSS: It’s a mess. The alistapart-author Jonathan Snook gave a speech at the “Beyond Tellerrand”, where he speaks about how we regularly come into this mess and how to avoid the traps. He presents methods to organize our code in a more scalable and modular way, which enables us to alter our CSS code in a cleaner way.

The Top Five Mistakes of Massive CSS

During O’Reillys Velocity conference in 2010 Nicole Sullivan and Stoyan Stefanov gave a speech about the problem of “out-of-control CSS”. Once, your CSS code exploded, it will have significant impact on your websites performance. In their speech they show you the track to come to a lighter and more logical CSS structure, which will be easier to maintain. They introduce you to lint tools, which help you to evaluate the efficiency of your CSS, point you to the five most common causes of CSS bloat and explain, how you can speed up your CSS code.

The two speakers are well-known for their CSS skills. The CSS ninja Nicole Sullivan worked on an object-oriented way to work with CSS and cooperated with the W3C and others. Stoyan Stefanov is a front-end engineer at Yahoo! Search. Both speakers contributed to the famous web design bible “Even Faster Web Sites“.

Slaying the Dragon: Refactoring CSS for Maintainability

Alicia Liu tells you, how to slay the dragon. In her speech at Front-Trends 2014, she is also concerned with the problem, that CSS code grows like a hydra. Often enough we lose track about special selectors, how and where they apply and if they apply at all. Here way to slay the hydra: Refactoring, because:

Rewrites are costly and high risk, refactor instead!

CSS to go – responsive design for mobile devices

No, how could you? No one has missed the probably most important change in web design in the last years: mobile devices. Since the ground breaking article “Responsive Web Design, which Ethan Marcott published in 2010 on A list apart, the question of responsive design became one of the hot spots of web design and almost every new web design contract comes along with the task to “make it responsive”. But, what are the best techniques to do so? This section presents you some videos and speeches with quite some insight into this topic.

Responsive design for starters

Just for starters, to know, what the fuzz is all about, this five-minute introduction into responsive design will be helpful. Basically, this video introduces you to the usage of media queries.

CSS in your pocket

Angelina Fabbro focusses in her speech on cross-device debugging. She gave her presentation at the CSSConf 2014 and is a developer at Mozilla, where she also authors some articles about JavaScript, web components, Node.js, mobile app development and so on.

CSS3-D

When it comes to CSS, most people believe the third dimension is to throw a shadow. But CSS3 is far beyond. The speakers of this section will give you an insight, how deep the third dimension of CSS really is.

Thinking in the third dimension

In her presentation Val Head jumps right into the third and even forth dimension so I was not quite sure, whether to put here into the “CSS3-D”-section or “Into the 4th dimension”. Lets leave here, as the title of her talk suggests in the third dimension.

Val Head is the author of the fine e-book “CSS Animations and a well-known speaker on a lot of summits like “A Event Apart” and others.

Maths-powered transforms for creating 3D shapes

You want to enter the third dimension? Lets face it, you will need mathematics to do so. Ana-Maria Tudor speaks at length about the relationship between mathematics and CSS transforms. This is not just a talk, if you want to transform your elements, you need to have a look into this.

Into the 4th dimension: CSS in time

A screen has two dimensions and design is timeless. Not only since Quake we know, the first statement is wrong, since CSS3 the second as well, because with transition and other elements introduced, design entered the time axis. But, what are the best practices in this and how far can you go? Amazing examples have proven, that CSS3 exceeded some boundaries, designers thought to be stable after all. In this section, our speakers focus on time events in CSS.

Fun and Flair with CSS3 Animations

Lets dive into it and have some fun with the forth dimension. In her presentation at the HTML5DevConf Alexis Goldstein, author of “HTML5 & CSS3 For The Real World” and “Learning CSS3 Animations and Transitions” undertakes the effort to present you “how you can add a bit of creativity and spice to your website by taking advantage of CSS3 animations and transitions“. The examples, she presents take care to use animations in a way, which won’t affect the user’s experience for browsers, incapable of interpreting the animations.

CSS in the 4th Dimension

In 2013 Lea Verou gave a talk at the JSConfAsia, where she introduces you into the basic concepts of transitions and animations. Verou is a web designer, who used to work for the W3C and the MIT. At the moment she is working on her latest work “CSS Secrets”, which will be published at O’Reillys.

When to .stop() using .animate() and #start using .css3-animations

Okay, okay, whats all this animation fuzz about, the jQuery developer might wonder. I just continue to use jQuery.animate(). Jessica Dillons talk on the jQuery Conference 2013 focusses exactly these audience: Why and when to .stop() using jQuery in order to animate your elements?

In this talk, you will walk away with knowledge about the differences between using CSS3 and JavaScript to perform animations. This also includes some of the tradeoffs that come with each in regards to ease of use, browser support, performance and extensibility.
jQuery Conference Portland 2013

Conclusion

This amazing list of talks and presentations helped me a lot understanding better, how CSS works and what you can actually perform with it. There are still tons of brilliant talks out there and if you are missing one, please tell me below in the comments. I will update this list regularly.

photo credit: striatic cc

Thanks to the academy: My plugin got an award!

WP-Super plugins, a WordPress plugin review site, has just reviewed my Search Filter Plugin. For everyone, who doesn’t know this site: WP superplugins is dedicated to WordPress plugins. They review free and premium plugins. By now, I know a lot of plugin reviews and pages, which are doing reviews. Superplugins is quite outstanding, since they are really into reviews and you can tell this from the quality of their reviews. So I’ve contacted them some weeks ago, to ask, whether they want to review my plugin. Carl, the author of the review agreed, although, as he wrote

I’ll be honest and say […] we thought “Not another search filter plugin”, most of them don’t work, require NASA experience to use and look just plain ugly.
Carl, WP Super Plugins

Not the best thoughts for a plugin review from my perspective and so I was more than happy, when I read the actual review today.

When I first installed the plugin I had my NASA research book at the ready and my geek cap on preparing myself for a couple of hours of research and testing. Honestly, five minutes later I was integrating search functions that I wasn’t really able to achieve on any other site. It was easy, simple and actually quite a bit of fun to set-up.
Carl, WP Super Plugins

WP Superplugins awarded my plugin with the Gold Standard Award.
WP Superplugins awarded my plugin with the Gold Standard Award.

But not only Carl wrote a very nice review about my plugin, the guys over at WP Super Plugins decided to award my plugin with their “Gold standard award” for “outstanding capabilities, development and support”! Well, what else can I see except for thanks to the academy.

So, for everyone, who wants to have a look, please read the WordPress custom search plugin review over at WP Super Plugins. Thanks again!

Why to escape get_permalink()?

Recently I started to create a new theme and found underscores (_S) to work with. Underscores is well-known to follow the WordPress coding standards and so I decided to use it in order to start my new theme.

I stumbled over some piece of code, which was in my opinion a bit of awkward. I started to wonder about it. To sum it up, it was the following line:

...

 

get_permalink();
This function is supposed to return a string with the URL address of the current post. You can also send the ID of the post or the post object.
esc_url();
This function allows you to sanitize URLs. It gets rid of invalid characters, checks the protocol etc.

I started to wonder, since get_permalink() is supposed to return links, why does this function not sanitize the link itself? But, this looks to be by purpose, since a look into the function the_permalink(), which echos the link of get_permalink(), reveals: Here the link gets sanitize before its echoed.

When I started to search for a reason, I found a small discussion about “Too Much Escaping“, started by Konstantin in his blog. He started his discussion with this example:

which he calls

Dirty, difficult to read and understand, and even more difficult to spot an error Konstantin Kovshenin

True. Related to my specific problem why to escape the permalink, he just suggests pragmatically to use the_permalink(); for a better read. But, the_permalink(); escapes, why so?

I call that paranoia. […] The permalink [… is] never going to break out of the attributes syntax. Konstantin Kovshenin

If so, a lot of useless code has been written. The basic question would be:

 'What happens with the Ampersand?',
	'post_type' => 'post',
	'post_status' => 'publish',
	'post_name' => 'what-happens-with-the-ampersand-&'
);
$post_id = wp_insert_post( $args );
echo get_permalink( $post_id );
?>

Basically wp_insert_post() sanitize the post_name before saving it. So in order to get a not-sanitized URL out of get_permalink(), this URL needs to be injected beyond wp_insert_post(). Paranoia?

If we read the code, we realize, WordPress does not exclude this possibility at all. There might be reasons for a WordPress developer to use ampersands (I will stick with the ampersand for now) in post links even if this means to go beyond wp_insert_code(). If this is the case: esc_url() will transform the ampersand to its numeric entity. So the URL http://www.youtube.com/watch?feature=player_detailpage&v=6q7LPD2KjNE#t=110
would be http://www.youtube.com/watch?feature=player_detailpage&v=6q7LPD2KjNE#t=110

And lets say, this URL is not just used in HTML documents, but also in text documents. The user can download the text as a text file, which is dynamically produced. At the end of this file, the user finds the URL to its origin. In this case &#038 would not equal & anymore. So, if we would use

we would get a wrong URL, while

would output the right address.

Something like a conclusion

So, I am not quite sure. The example above is quite a bit far fetched, but there might be reasons, why to sanitize permalinks and if you are working on themes and plugins for a wider audience, maybe you should sanitize even get_permalink(), or – whenever you can – use the_permalink(). Or am I paranoid?

Any thoughts on this?

photo credit: BrittneyBush cc