Tag: Page builder

  • Where Things Get a Little Technical: How We Made Our Version of Shortcode Mapping Happen

    How-We-Made-Our-Version-Of-Shortcode-Mapping-Happen-2On the previous article, we’ve discussed the basics of shortcode mapping and how you can get access to its sweet benefits. We’ve decided to split the article featuring the Page Builder Sandwich version of Shortcode Mapping, as the following write-up may get a little more technical.

    Below are more in-depth descriptions of the inner workings of our shortcode mapping feature, and how we got it to work.

    An Automated Process

    In order to decide which plugins to include in the shortcode mapper, we built an automated script that will gather the top plugins in the WordPress plugin directory based on the following criteria:

    • Within the 1,000 popular, top-rated and updated plugins,With at least 4,000 active installs,
    • With at least 4,000 active installs,
    • With at least 20 ratings, and;
    • With at least a 3-star average rating

    We run this query daily against the WordPress plugin directory. These filters ensure that we get a list of good quality plugins that a lot of people use. During the time this was written, this criteria resulted in 800 plugins. That’s a lot. Like, a lot.

    Some of the most popular plugins detected for shortcode mapping.
    Some of the most popular plugins detected for shortcode mapping.

    We then run a series of automated checks on each plugin’s source code to find out whether it contains any shortcodes, and then we try and find all of those shortcodes, including all their attributes. Crunching the data, this resulted in over 2,000 shortcodes. Double woah. Detected shortcodes are then inputted into the shortcode mapping database for manual inspection.

    By the end of this process, we would end up with a huge list of plugins, and what their possible shortcodes are. It’s now a matter of cleaning this data up to make sure everything’s correct.

    A Manual Process

    This is probably the hardest part of the whole mapping system. Plugin code comes in different forms and sizes, not all shortcodes are automatically detected by our scripts. Even though the WordPress Codex says to use the function `shortcode_atts` to filter a shortcode’s attributes, this is only a recommendation and not everyone does it. There is also no sure-fire way to check the innards of a shortcode when a plugin is installed.

    To so make sure that we get all the shortcodes and their attributes right, we created a front end area dedicated to editing shortcodes and attributes and is built using AngularJS and Bootstrap.

    Bootstrap & AngularJS interface for fixing up all the mapped shortcodes.
    Bootstrap & AngularJS interface for fixing up all the mapped shortcodes.

    We’ll have to manually go through each and every plugin and check their shortcode documentation and make sure that all the data we have is correct.

    Even though this is painstakingly tedious, there are some bright sides to having an automated process:

    • According to our early stats, only around 1 in every 2 plugins have shortcodes.
    • Half of the detected shortcodes have no attributes (but a portion of this may be false positives)
    • By getting only good quality plugins, most likely they have shortcode documentation

    When all of a plugin’s shortcodes have been checked, only then will the server start distributing the shortcode mappings of that plugin to the users.

    A Rest API Call

    The last piece of the puzzle is the plugin itself. The concept here is simple: find out what plugins are active, what theme the site is using and what shortcodes are available, then ask the shortcode mapping database whether it has mappings. For this we created a custom WP REST API endpoint that all clients ping to get their latest shortcode mappings.

    The Future: Crowdsourcing

    Manually checking each plugin requires a lot of time and effort. Once the shortcode mapping platform is stable, we plan on opening up shortcode mapping to everyone. This means that everyone can help out in adding shortcodes.

    You might be thinking, “why would I help map out shortcodes? What’s in it for me?” Well, a few things come into mind on why people would want to help out:

    1. If you have created a plugin, and we haven’t caught it yet because of the criteria above, (and it’s in the WordPress plugin directory) then you can add the mappings yourself. Your plugin would become fully supported by PBS!
    2. Since we’ll only be dealing with those in the WordPress plugin directory in the automated process, premium plugin & theme authors won’t become included. So if you have one, then you can also your shortcode mappings for those.
    3. And for the non-plugin creators, we can reward those who help. To make shortcode mapping an enticing endeavor, we can reward happy helpers with a personal license, or an upgrade to a premium license of PBS!

    Sign up to Our Newsletter

    The shortcode mapping functionality will be out for our customers tentatively on August 12  August 15  August 16, 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    Sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public!

  • 5 Reasons Why Whitespace Matters

    Reasons-Why-Whitespace-MattersBasically, whitespace, at its most basic definition, is the space around and between all the elements of a composition that is left unmarked. It’s not just a waste of screen space, as most websites owners think. When used well, whitespaces can actually provide benefits to better promote a product. It is an important key to creating good design and it makes a website better in every way.

    Although the name whitespace implies that the space is white, it doesn’t always have to be literally white. Whitespace can actually be any color—It can even have a subtle pattern or texture. It’s an area that you don’t want the eye to focus on. Alternatively, it’s called a negative space.

    So, why does whitespace matter?

    newsfeed
    Image Source: News Feed

    Reason #1: Improves readability

    Whitespace between baselines and paragraphs actually help people comfortably read all of the content on the site. Adjusting small details of your site (like line-spacing/leading or the letter-spacing) could make a huge difference in make reading easier.

    The goal is to make people want to keep reading by designing layouts that are easy on the eyes.

    hpmagicwords
    Image Source: HP Magic Words

    Reason #2: Speeds up interaction

    Let’s be honest: most of your visitors won’t have enough patience to look thoroughly when browsing through websites. When a website looks cluttered, it keeps users distracted from finding what they are looking for.

    Whitespaces should help lead the viewer around the page. Less elements competing for attention plus proper use of whitespaces can prevent distractions that slows visitors down.

    google
    Image Source: Google

    Reason #3: Drive attention to the right elements

    Whitespace can give users visual cues on where they should be looking. When used in a correct manner, whitespaces help emphasize information and draw attention to a particular area on you website.

    Remember, if everything stands out, nothing does.

    Image Source: Pocket Penguins

    Reason #4: First impressions matter

    The look and feel of a website is the main key to good first impressions. Good first impressions often leads to longer visit duration. Too little whitespace can make your website look cheap and unreliable. Visitors won’t think the site or the brand is credible unless it looks attractive. Having a good amount of whitespace helps create the right tone for your website. Whitespace can be a way to communicate ingenuity, freshness, and sometimes, elegance.

    Tip: Here’s an idea on how to make your web design simple and familiar.

    flockknitwear
    Image Source: Flock Knitwear

    Reason #5: Helps create breathing room and balance

    A balanced design doesn’t mean symmetrical. A large design element can be balanced by a few smaller once. Adding whitespace is a great way to balance different-sized design elements on your page. Create a flow so the users eyes won’t dart all over the place. A good design should be able to guide the user from one point to another without confusing the visitor.

    Conclusion

    Next time you visit a website and find yourself staying a while, think about what made you stay and read. Do you think the line-spacing makes an article easier to read? Does the experience make you want to keep coming back for more? Did you have a hard time looking for the navigation?

    Take note of the good application of whitespace on the website. If you think it can also work in your website, learn to apply and manage how much space you should allocate on your element until you think you’ve conveyed the right tone and readability without sacrificing the “flow” you want for your website.

    The ultimate goal of any website is communication. Visual appeal goes hand in hand with the success of your website.