Writing Better Plugins for a Better Web

By Divya Manian

Who am I?

Open Web Vigilante

Web Opener at

Core team

Co-conspirator

HTML5Readiness.com, W3Fools.com

Website

nimbupani.com

Twitter

@divya

Some Wordpress Sites I did

Wordpress Plugins Now

How they are now

Start from PHP than work backwards from markup, styles, and script.

Use several assets and files.

Not optimized for highly efficient website performance.

Plugins Should

Be as less intrusive as possible

Maintainable, forward compliant.

Efficient, least time consuming.

Why does website performance matter?

Breaking News! Users use several devices

Even more Breaking News! They don't always have broadband connections!

People use a lot of plugins on their sites. Each adding a layer of traffic burden.

Lets fix this!

Mantra: Use as less as you can get away with.

Philosophy

What problem does this plugin solve?
What is the most minimal solution?
What are the constraints of the minimal solution?
What kind of browsers are you willing to support?
How much user-assistance are you willing to provide?
How much style should you provide and how much should the theme?
Figure out how much control you want your users to have.
Don't neglect the power users.

Start from the end

Write your markup, style and script (if necessary).

Style

Reuse your styles.
Use a reasonably unique namespace.
Keep it short. Make sure you cover all browsers.
Do not inline CSS.

Tools

Sass, css3please.com, caniuse.com

Markup

Do not add divs just because it is easy to do that in PHP.
Use templates if you can.
If you need a wrapper for style, rethink the styling.
Use browser defaults where available, Wordpress defaults where available.

Learn

The Web Standards Curriculum, Dive into HTML5

Scripts

Leverage existing scripts.
Always minify your script.
  • Avoid using JavaScript plugins (if you can).
  • Plain JavaScript could be faster than depending on other jQuery plugins.
Make sure your script does not conflict with any other.

Tools

JsHint, Uglifui.

Learn

Videos: The JavaScript Programming Language, Learning JavaScript, jQuery Performance Tricks

Assets

Avoid using images for styles, if it is possible.

Use a sprite if absolutely necessary.

Avoid using custom fonts. The theme design should override your preferences.

Test

Use a speed test: Yslow, pagespeed
Make sure your files are minimized
But do have expanded CSS/JS available for front end developers to tweak and use if necessary.

So, Now

Mantra

Use as less as you can get away with.

  • Find your constraints
  • Use as less styles as possible, let the theme do most of the styling.
  • Choose your markup carefully.
  • Minimize your scripts, and avoid external dependencies if you can.

Thanks

Questions? Ask @divya