SFignore: The .forceignore Salesforce SFDX Plugin

Salesforce SFDX projects are a great way to build both declaratively and through code for the Salesforce platform. It’s very common to want to ignore particular files from being pushed or pulled between Orgs and your local project, and this is achieved through .forceignore file. The file has some odd (and undocumented) syntax however, and the process is also known to have a few bugs, and getting the right entries in the file can be hard… and that’s where the SFignore SFDX plugin comes in.

The .forceignore file and the process behind it is sprinkled with black magic – Todd Halfpenny, 2020

I’ve created the SFignore plugin initially through an internal need for the work I’ve been doing with the Caddify project at MobileCaddy. A lot of this work has been around using Salesforce 2GP (second generation packaging) tools to create packages for our new product. Our workflow includes pushing, pulling, deploying to many different shape orgs and includes a fair bit of code and metadata that is used solely for non-production scenarios (test setup, demo data, org cleaning, etc) and we want to make sure that nothing accidentally gets put into our managed package releases. The .forceignore file that is used by the SFDX CLI tooling and tracking allows us to do this – or most of it at least… but it’s syntax is nuanced and is lacking in documentation.

The SFignore plugin gives me an easier way to add entries to the .forceignore file, by taking away the guessing of syntax and the need to remember the correct suffixes for the different metadata types. This is useful, as would you know (or remember) if the correct suffix for a SiteDotCom entry should be SiteDotCom, siteDotCom, or site? And what about AppMenu? Would you know whether to use appMenu, AppMenu, Menu, menu? Only one of these is right, and the syntax differs further depending on whether the change is local or remote. Oh you also need to encode (some) special characters too… if you didn’t know that then this could be why your entry for “Custom: Sales Profile.profile” isn’t working as you expected.

The initial release only supports entries for remote changes, and only a subset of metadata types that I’ve had to use so far… but the roadmap for it includes;

  • Support for local syntax
  • Wildcarding – currently only supports specific entries
  • An extension for vscode.

Here’s an example of using the plugin, where we’re wanting to add an entry to ignore pulls for the profile Custom: Sales Profile.

sfdx sfignore:add -n "Custom: Sales Profile" -m Profile

This results in the following entry being added;

Custom%3A Sales Profile.profile

The -m flag specifies the metadata type, and the valid values should match those as seen on Salesforce’s metadata coverage report and the output of a sfdx force:source:status command.

It should also be noted that something’s appear to be impossible to achieve with the .forceignore file, including;

  • Adding some tests – yeah, sorry
  • Specifying specific custom fields
  • Specifying specific custom metadata
  • Specifying specific record types

If you know how to achieve the above I’d be very happy to hear about it.

You can find the source for SFignore SFDX plugin on github, and you can download it from the npm registry too

sfdx plugins:install sfignore

If you use the plugin and need more metadata types added then please raise an issue on github, or even better fork the repo and create a PR.

sf-package-version-checker – SFDX Plugin to notify on completion of Salesforce Package Builds

If you’ve ever built Salesforce packages with the SFDX commands (in fact long before this) you’ll know that the creation of a package can take some time, especially if your package has dependencies.

At MobileCaddy we’ve been adopting the SFDX CLI as much as we can – and in fact embracing the SFDX ethos as a whole – and recently we’ve been working with the Salesforce second-generation packaging (2GP). During this I’ve found that the standard SFDX command to create a package version would continue to give me status updates every 30 seconds for 10 minutes by default, and even though I could set the overall timeout to a longer value (using the –wait flag, and specifying a number of minutes) I often forgot that the task was running and found myself forgetting to watch the terminal window. What I really wanted was something that would notify once the build had completed successfully (or erroneously).

So, during one of the package builds (~25 minutes in this case, if I remember correctly) I put together the basis for a new SFDX plugin that I could run to monitor the latest package build request, and then ping up a desktop notification when it had completed.

I was actually on the line-up for the (now postponed) CzechDreamin’ 2020, with a talk titled “Take your SFDX Plugins to the Next Level”. The talk covers many ways to interact with SFDX plugins other than via the CLI, and one of the topics included was the use of the node-notifier npm module to create native desktop notifications, and so I put this to good use.

You can very easily support basic (and more advanced) notifications with node-notifier for Mac, Linux and Windows environments; here’s some sample code (similar to that used in my plugin);

First import node-notifier (after installing it with npm/yarn)

import * as notifier from 'node-notifier'

Then to use it have code similar to this;

notifier.notify({
 'title': 'Latest Packaging Version Creation Complete',
 'subtitle': ‘Success’,
 'message': SubscriberPackageVersionId: ' + res.SubscriberPackageVersionId
 'icon': iconPath,
 'sound': true,
 'timeout': 30
 });

This results in this type of experience;

The source code (with little over 100 lines of actual logic) can be found in the github repo, and the plugin can be installed as an SFDX CLI plugin and run with the following commands;

$ sfdx plugins:install sf-package-version-checker
$ 
$ sfdx pkgvsn:monitor

How I Archived sessions on London’s Calling site

Past conference sessions are a valuable asset for conference organisers, so for the London’s Calling Salesforce community event I came up with a way to archive them, and now you can too.

For the second year I was tasked with maintaining the website for Europe’s largest Salesforce community event – London’s Calling. And running up to the launch of the this years CFP for speakers and sponsorship registration I wanted to leverage the incredible resources that we had in the form of the sessions for the past two years.

Seeing that our site was powered by WordPress – using the Tyler conference theme – and that I have released a couple of WordPress plugins before (including the 5* rated Widgets on Pages) I wrote the Past Events Extension plugin to do just what was needed.

The free version enables site admins to archive sessions, which are then listed on a Past Sessions page. The Pro version includes support for a shortcode that can be used in any page or post to list these archived sessions for a given date range, meaning that you could for example create pages for each past event. The latter is what has been used on the London’s Calling site.

Running a not-for-profit event? Get 50% of the annual license now!

Other PRO features are;

  • Additional Video setting – Add embedded video for each past-session (e.g. from Vimeo, YouTube); ideal to show off past presentations.
  • Additional Slide-deck link setting – Add a link to slide-decks used for each session.
  • Enhanced Single-Session page – Shows the embedded video and slide links

So what are you waiting for? Go grab the free version now and use your previous events to help sell tickets and gain sponsors.

From a Problem to 100,000 Downloads

It was 1054 days ago that I first wanted to place a WordPress widget into a post I was writing. Whether it was for a client site or personal one I can’t remember… the important thing is that out of the solution I came up with emerged the Widgets On Pages WordPress plugin.

The plugin has undergone very little change since it’s 0.0.1 check-in to the WordPress.org plugin repository but since then it’s had very favourable reviews and been included in several blog posts and conference talks. But more importantly, for today at least, it’s now been downloaded over 100,000 times!

It has a current rating of 4.7/5 and at the time of writing sits as the 105th most highest rated plugin on the WordPress.org repository. 105th might not seem too good but it should be noted there are over 23,800 plugins in the repo.

Lanyrd Splat WordPress Widget Plugin

Lanyrd info as a WordPress widget

Last night I noticed that the Lanyrd event info that was meant to be listed in my blog sidebar was no longer working. I was, at the time, using the My Lanyrd Widget which was up to a time working well… but then I noticed it had just stopped working.

I had a quick browse on the Lanyrd site and noticed that had some official JS and code which could be used to display a badge on your site showing pretty much the same info as the above mentioned widget had been doing.

And so, after an hour or so of coding the Lanyrd Splat Widget plugin for WordPress was born. I immediately requested a repo on the WordPress.org site and as soon as this was approved my checked in the code and the Lanyrd Splat Widget was launched!

Lanyrd info as a WordPress widget
The Lanyrd Widget in action

The plugin has settings for the maximum number of events to show as well as the format and of course the Lanyrd username of the info to use.

Lanyrd Widget Settings
The Lanyrd Widget Settings

The plugin pulls the info from Lanyrd  every time the page is loaded, which is obviously not ideal. I had toyed with the idea of using the ics feed which Lanyrd provides and then using transient storage inside WordPress to temporarily cache the data. I decided to not use this for the time as the route I’ve taken pulls only the data needed and also supports richer data. My view on this may change in time… we will just have to see how this performs.

The Lanyrd Splat Widget can be downloaded from the official WordPress.org plugin repository.

WordPress 1 Minute Wonder – Quick Performance Boosts

WordPress One Minute Wonder

This latest WordPress 1 Minute Wonder installation covers a couple of quick alternative steps that can be taken to dramatically increase your site performance… and yes I’ll be honest and say that actually to cover all 3 steps here it takes more like 10 minutes.

In the below investigation I based “performance” on Google’s PageSpeed rating and Yahoo’s YSlow and this was run against a newly launched online craft store site called Designs and Such.

Step 1 – Optimise Images

Using the PageSpeed tool (in Chrome) it was possible to  see that I had several un-optimised images on my site. I processed these with the free optipng tool and instantly saw an increase in 6 PageSpeed points and  2 YSlow points. Not bad for something which anyone can do.

Step 2 – W3-Total-Cache Plugin

Now there is some stigma around having lots of plugins on your WordPress site and the detrimental affect it can have on performance… now whether you back this line of thought or not* sometimes plugins can really benefit your site in this context. Now please be sure to backup your DB (or entire site) before using any plugins which might modify you’re .htaccess and potentially other files in your installation.

For my investigation I installed the W3-Total-Cache plugin and configured it just to cache and minify my HTML, JS and CSS. The results were staggering… I saw an overall increase of 11 Google PageSpeeed points and 12 YSlow points

Step 3 – .htaccess Tweaks

Another step, this time plugin-free, should immediately give some good results. Simply by adding the following lines to one of my site’s .htaccess file I saw a further 4 point increase in my PageSpeed score and a 1 point increase in Yahoo’s YSLow rating.

The following lines do 2 things, add expire headers to static files such as CSS, javascript and images and also removing ETags. Of course please backup your .htaccess before doing any of this.

#Expire Header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

FileETag none

This is defining a 1 month expiry for all content covered by the files types listed above. Note if you do this there’ll be implications if you want to modify any of the files, like CSS, and have the changes to affect immediately.

This technique (and more info on it) was found over at Tips & Tricks HQ

The overall results

So in total by carrying out the above steps I saw the following performance increase. Of course the results will vary site by site but I believe that with Search Engines using site performance as a factor when ranking your site that 10 minutes spent here will be of value.

Google PageSpeed Increase = 21

Yahoo YSlow Increase = 15

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this technique on your site for performance reasons and have some results then please leave them in the comments.[/jbox]

* When speaking to @westi at WordCamp UK (or WordCamp Manchester) in 2010 he said that putting code in plugins rather than the core should result in no performance hit… of course it depends on the quality of code

WordPress 1 Minute Wonder – Styling Widgets on Pages Horizontally

WordPress One Minute Wonder

In this edition of WordPress 1 Minute Wonders I will answer a question which I frequently get emailed about… and that is how to style widgets next to each other when using my Widgets on Pages WordPress plugin.

In this post I have 3 widgets in one of the sidebars created by the plugin. I have named the sidebar horiz.

To get the Widgets to display as they do above there was some extra CSS that I had to add to my theme’s style.css file to get them to display like this… here it is.

#horiz {
  overflow: auto;margin: 10p;padding: 10px;
}
#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
  margin: 0 1%;
 }

I have put a fair amount of styling in there to make them look a bit more appealing but essentially the important bit that makes the widgets sit next to each other can be done with just the following;

#horiz {
  overflow: auto;
}
#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  margin: 0 1%;
 }

In the first section we style the whole sidebar (you would replace .horiz with whatever you had called your sidebar), making sure that the content overflow is set to auto. This makes sure that any content following the sidebar does not also creep up alongside the widgets.

The second section styles the widgets (all three in this case). The key part here is the float:left; which makes them site alongside each other.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this tip why not subscribe to my feed or check out the first item in the WordPress 1 Minute Wonder series?[/jbox]

5 Tricks to Spice up your WordPress Blog

By adding a few lines of code or installing a plugin or two you can add some extra spice to your WordPress blog (or other WordPress powered site) and at the same time  bring a lot more value to your readers.

Wordpress LogoOf course these tips are dependant on your ability to install plugins/widgets etc and some are also only applicable to themes with certain functionality, but you should see at least one tip here that you can apply nice and easily.

1) Enhance your Sidebar

If your blog has a sidebar (and let’s face it most blogging themes proide at least one) then this gives you prime screen real estate to give extra information to your readers about you and your blog or subject matter. There are many, many plugins out there which cater for all sorts of users and content type.

As you can see on my sidebar I provide a list of events that I’m attending, giving hopefully some more context to the things that I’m interested in. This is powered by the My Lanyrd Widget and as such pulls information from my Lanyrd account.

As I’ve said, there are many sidebar widgets available… so what are you waiting for, go get some!

2) Put Widgets in your Posts

Following on from Step 1 is the perfect tip for adding extra “dynamic” content to otherwise fairly static blog posts or pages… Add your widgets to them!

All you need to do is install the Widgets on Pages plugin and then add the widgets that you want to the newly created sidebars and then place a simple shortcode in your post content and your widgets will be displayed inline. For example I’m displaying my “posts calandar” right here

3) Shortcodes

Shortcodes can be extremely powerful and can provide you with a quick way to add extra content/design to your posts and pages. There are many “shortcode” plugins available and a lot can be downloaded for free from WordPress.org. A simple example is the J Shortcodes plugin which among other things enables you to quickly add styled areas to your posts.

[jbox]This text is in a nice styled box using the J Shortcodes plugin[/jbox]

4) Customise your Feed

A key way to give your readers more is to improve the default RSS feed that goes out to them. This is done by adding some short code to the functions.php file (located in your WordPress theme’s directory). I add the featured image to my articles as well as a short finishing line to thanks the reader for the time and to send them to my blog.

The options here are really only limited by your imagination, you could add links to related posts for example.

The code to add a nice sign off is as follows;

function feedFilter($query) {
if ($query->is_feed) {
add_filter('the_content', 'feedContentFilter');
}
return $query;
}
add_filter('pre_get_posts','feedFilter');
function feedContentFilter($content) {
$content .= '<p>Thanks for reading, check out <a href="'.
get_bloginfo('url') .'">'. get_bloginfo('name') .
'</a> for more from Todd Halfpenny</p>';
return $content;
}

5) Make it Device Ready

With every day that goes by there are more and more Internet-ready devices on the market and these come in all sorts of sizes. And it’s with this in mind that having your blog ready to display optimally on this wide range of fixed and mobile devices you should really start thinking about making your blog “responsive”… or at least mobile phone friendly.

There are various free and paid for ways of getting your site to work well for readers who aren’t just using their PC at home or work, but I’m gonna focus on just 2 here.

Make you Site Responsive

This is the best place for your site to be… it means that your site is future-prrof (ish) for devices of all various sizes to access it. Implementing this generally means having to get a theme tweaked to utilise media queries and various other CSS techniques… but I have a cunning plan for those using the default TwentyTen WordPress theme… the Responsive TwentyTen plugin. This plugin (free) instantly turns your site into a responsive one and means that as the browser window size changes your site re-formats itself to display in the most optimal fashion. Don’t believe me? Just try it on this site.

WordPress Mobile Plugins

There are several plugin available which will server up optimised content for mobiles. A decent review of different plugins and approaches can be seen over at WP Candy.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Get Started”]So what are you waiting for?

Get downloading the great Widgets on Pages plugin and check out check out how to make your site look good on mobiles.[/jbox]

Advanced WordPress Page Layout Experiment

Screenshot of layout

Styling WordPress page and post layouts can be daunting for the novice… especially if you don’t want to dirty your hands with PHP and the like. I wanted to experiment with what was possible to do using only the default WordPress theme 2010 and plugins alone (OK, some CSS was needed).

So I set myself the challenge of mirroring something which is a classic layout across news sites and ended up with the perfect example from the BBC News web pages (please someone let me know if I’m NOT allowed to publish the below pic).

Extract of the BBC News site, the desired layout
Extract of the BBC News site, the desired layout

The desired layout is essentially a main news article with a supporting image followed by a couple of secondary articles and then a listing of tertiary articles.

My initial ideas came from using the Widgets on Pages WorPress plugin that I had developed which allows the addition of sidebar areas to be inserted inline in pages and posts. Using this plugin I was able to essentially define multiple areas in a standard page (using a standard template) which could then have independant content defined and (with some tweaks to the live version of the Widget on Pages plugin) could be styled each in it’s own way. This, by itself, was limited though as I really needed some mechanism to pull in the desired stories… I needed something to support it.

Then at the recent WordCampUK 2010 I was lucky enough to be attending Michael Kimb Jones‘ presentation on WOW Plugins when the Query Posts plugin (by the incredible Justin Tadlock) was brought to my attention. The plugin provides a widget can be set up to be populated with the result of a query against the posts in the database. Kimb actually mentioned that he had thought of producing an entire WordPress site just through widgets… a very similar one to the train of investigation I was pursuing. This Query Posts plugin was the answer.

I put this plugin to work (with some slight mods to now use WordPress featured image feature) alongside my own Widgets on Pages plugin and some additional CSS to the 2010 theme to come up with a layout that is indeed on the way to what I was after.

Screenshot of layout
Adv layout with no template messing

The page content actually consists of only the following content;

[widgets_on_pages id="featured_news"]
[widgets_on_pages id="also_in_the_news"]

To support this I have 2 sidebar areas defined (featured_news and also_in_the_news) which each have Query Posts widgets in which pull in the news feed with each one offset to allow idea of one single feed.

The CSS used to stylize these is as follows (yes I know it’s not clean… this is an experiment remember);

.featured_news {
width:650px;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
padding-bottom: 8px;
}

.also_in_the_news ul li {
float: left;
width:290px;
padding: 0 0 0 0
}

.also_in_the_news  {
margin: 5px 0px 10px 0;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
width:650px;
}

.also_in_the_news ul li:first-child {
float: left;
width:290px;
margin: 0 0px 0 0;
}

.widgets_on_page ul {
list-style: none;
}

.widgets_on_page h2.widgettitle  {
font-size:1.2em;
}

.widgets_on_page h2.post-title a  {
font-size:0.9em;
}

.featured_news h2.post-title a   {
font-size: 1.5em;
}

.widgets_on_page .entry-summary {
clear: both;
padding: 0px 0 0 0;
font-size: 0.8em;
line-height: 1.5em;
font-family: arial;
}

.widgets_on_page  {
font-size:0.9em;
}

.widgets_on_page .hentry  {
margin: 0 0 5px 0;
}

#content .widgets_on_page  p,
#content .widgets_on_page  ul,
#content .widgets_on_page  ol,
#content .widgets_on_page  dd,
#content .widgets_on_page  pre,
#content .widgets_on_page  hr {
margin-bottom:5px;
}

img.attachment-thumbnail {
float: left;
}

.also_in_the_news img.attachment-thumbnail {
display: none;
}

.featured_news .words {
margin: 0 0 0 20px;
clear: none;
float: left;
width: 440px;
}

li.widget li a {
font-family: arial;
text-decoration: none;
font-weight: bold;
font-size: 0.8em;
}

li.widget li ,li.widget li:first-child  {
margin-bottom: 0.8em;
}

li.widget li a:hover {
font-family: arial;
text-decoration: underline;
}

The demo page

How to display Widgets inside posts and pages

I was faced the need to be able to place extra manageable content inside a wordpress page’s core content… and without an existing plugin available to do this I thought I’d write one of my own.

The output was the Widgets on Pages wordpress plugin which is at time of writing at version 0.0.4. The plugin basically allows the author to add a shortcode to their wordpress page or post which will then add the content of a predefined Widget area (or sidebar) at that point in the post/page

Widgets on Pages Options

The plugin approach allows the user to add a lot of extra control to their wordpress sites without the need for any coding or markup skills (PHP, MySQL, HTML etc).

UPDATE: In version 0.0.4 you are able to define an unlimited number of separate sidebars and call these all separately within the wordpress content.