Ionic ion-accordion with Custom ion-icon

ionic ion-accordion with custom icon

I recently had to re-visit some code for our Caddify no-code Mobile Companion App builder and had the opportunity to incorporate Ionic’s ion-accordion component. My use case required customisation of the icon used against the header of each accordion though, and I could not find an example for this. So here one is.

See the Pen
Ionic ion-accordion with Custom ion-icon
by Todd Halfpenny (@toddhalfpenny)
on CodePen.0

This CodePen example shows an ion-accordion-group with three accordions in. The first uses the OOTB icon, the second shows a working custom icon (still an ionicon) with styling, and the third shows what I was initially doing and getting it wrong.

The key to success is to define an ion-icon but to also give it a class of ion-accordion-toggle-icon, without which the out-of-the-box icon is also shown.

A working ion-accordion with a custom icon would look like this;

<ion-accordion value="second">
 <ion-item slot="header" color="light"> 
   <ion-icon
 class="ion-accordion-toggle-icon custom-icon"
 name="logo-ionic"
 slot="end" >
   </ion-icon>
   <ion-label>Second Accordion with custom icon</ion-label>
 </ion-item>
 <div class="ion-padding" slot="content">
 Second Content
 </div>
</ion-accordion>

In this example the custom-icon class is just used to set the color of the icon.

First Contribution to the SFDX CLI

I’ve been pushing some of the non-technical folk within Caddify to adopt the Salesforce CLI for some time. I find the ability to manage logins to different orgs a huge win and know that others benefit from this greatly also. And it was during one of these conversations with our CEO that he said “now if it could open orgs in different browsers that would be amazing”… and that got me thinking.

See the plugin’s changes in action in this video.

I have created several SFDX CLI plugins that we use internally (mostly managing scratch org creation and setup) and am very familiar with node and TypeScript so saw this as a great opportunity to see if I could implement a change that meant the DX org:open commands could target specific browsers on the user’s computer.

I had read – fairly recently – about the new modularisation of the SFDX CLI project, and was excited by this as I remember hearing from the Salesforce folk years ago when SFDX was initially released, and I asked about whether or not they’d planned to open source it all, and was told that it would be indeed be one of the end goals. Anyway, off I went to find the repository that supported the org namespace. After forking the project and pulling it down to my local development environment I was able to see that made use of the open node package, so in turn I made my way to their npm page to see if anything existed already to support “browser targeting”… and there it was, the project supported optional parameters to achieve just what I was after.

Within less than half an hour I had a working proof of concept on my local machine. I then turned to the Contributing section on the DX repo to see how I could get involved, and from there I created a new issue against the repo, mentioning that I’d love to create a PR to implement the new functionality. Only a short while later I had a response from the team, welcoming my input.

I proceeded to more properly implement the change (you know, with tests and that) and submitted my PR. I was honestly bowled-over by the welcoming, supportive, and helpful responses to my PR from the whole team. I was given guidance on naming, implementation, help messages, and all sorts… and I guarantee that the end code that was merged into the plugin’s repo was many times better than my first iteration. Huge thanks to Shane McLaughlin and the whole team for their support and patience.

This new feature is available in the v1.9.0 release of the plugin-org plugin.

In short, the new functionality is really useful, and I’d love to hear your thoughts on it, and also, if you think that the DX CLI could do with new features or improvements then dive on in and get involved.

Salesforce Vidyard Video Playback

I personally like to watch a lot of informational videos, I find this a good way to learn. One thing I do like though is being able to change the playback speed.

Sadly a lot of the Salesforce videos I watch are published through Vidyard, and for some reason Salesforce decide to not offer the option to change the playback speed via the video settings menu. There is good news though, and this comes in the form of hacking the video URL through the browser devtools.

Here’s a quick video demoing how to do it, but in short you want to add an extra query parameter to the video URL used. In the demo I add &speed=1.5 to the end video URL to enable me to watch the video at 1.5x speed.

I hope this helps you too.

Understanding the Salesforce Security Review with Amnon Kruvi

London Salesforce Dev’s Meet – April 2021

The latest installment of the London Salesforce Developers’ Trailblazer community meet (I’m sure the title gets longer every month) was another ripper, and this time it was a musical one.

We were once again honoured to have our co-organiser – and Salesforce MVP – Amnon Kruvi presenting for us, and this time on Understanding the Salesforce Security Review.

The Salesforce Security Review is a process that all apps need to go through if they’re to be listed on Salesforce’s AppExchange (this applies to paid-for as well as free apps), and it’s notorious for tripping folk up. At MobileCaddy we have recently just been through this process with our latest product Caddify – a no-code Companion App builder – and I’m all too aware of the pitfalls of the process (my scars are still raw). This is not to say that I’m not a fan of the SR (security review) process as a whole, as our application certainly improved in some areas having gone through the process (and I personally learnt lots of useful things about security too). The SR is, however, an undertaking that shouldn’t be breached without being prepared for what lies ahead… and this is what Amnon most tunefully delivered in his talk.

Thanks to MobileCaddy for their continued support in processing the videos. And be sure to subscribe to the London Salesforce Devs YouTube channel to be notified of future releases.

If you enjoyed this video you might want to also check out Amnon’s debut on Invocable Methods which is incredible (though it’ll be your earworm for at least a week).

After watching the session you’ll be sure to have picked up lots of points including to Think about Security at Every Stage of your application, and I have a couple of extra tips;

  1. Join the Security Review Partner Chatter Group – The partners and Salesforce personnel in this group are an invaluable and supportive bunch, and their guidance and advice is gold. In fact join the group before your first submission and ask about anything that you have queries on.
  2. Document ALL THE THINGS – If you’re app needs without sharing or does anything at all that sways from the absolute best-practice then make a note of it in your False Positives document.
  3. Take screenshots and copy the text of your Security Review wizard forms answers. If you fail your first submission (which very well may happen) you’ll need to re-enter all these details again.

The London Salesforce Developer’s Trailblazer community group is run by myself, Keir Bowden, Amnon Kruvi, and Erika McEvilly, and we meet every month. You can join our group here, and also follow us on Twitter and see much of our past content on our YouTube channel. We’re always looking for new speakers who are willing to share their knowledge with our community, so if you feel like contributing please get in touch.

As usual big thanks must go to not only my fellow organizers but also our incredible speaker Amnon, our sponsors MobileCaddy and BrightGen, and Salesforce for providing us with some certification vouchers to give away as prizes to our attendees.

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

Hooked on communities

With WordCamp London just around the corner (6th April), and the recent success of the London’s Calling event – a community conference for those in the Salesforce world – it got me thinking about how I’ve come to love community events so much, and made me wonder when and where it all began.

From the London’s Calling point of view, as an organiser, it’s so rewarding to see folk enjoying themselves at the events. It’s clear to see that there are real personal benefits to attending events like this; you don’t just get to learn (which is huge in itself) but to be surrounded by fellow attendees, speakers and sponsors gives such an opportunity to (buzzword alert) network that just can’t be found anywhere else. The event has just run its fourth year, and is going from strength to strength.

Credit: Kerry Townsend

My history with WordCamps stretches even further back. I attended my first one in 2010; I was dabbling with web development (and failing at design) when I read about it in a copy of the .net magazine. At that point I’d never been to a conference like this, and the same could be said for the local meets too… but I decided to bite the bullet. I can’t remember the precise reason for signing up, perhaps it was the schedule, perhaps it was the incredibly low price (this year’s event is still amazing value at £40), perhaps it was just an excuse to geek out for a weekend? Whatever the reason I was hooked; listening to the volunteer speakers share their knowledge and experiences was life changing, and on top of that I had some amazing conversations and met folk that I’m still in contact with and certainly consider friends.

Following that WordCamp I started attending the local WordPress London meetups, and returned to WordCamp annually, and with each event I was exposed to more tech, more knowledge, and more great people. It was these events that spurred me to create the Widgets on Pages plugin (which has ~0.5 million downloads). They also gave me the push to give public speaking a go, which is a decision that has greatly helped me in both a personal and business sense.

Fast forward 9 years and I’m still attending community events, with the only issue being that the risk of clashes increases with each new one I sign up to. I’m also now paying back the communities that welcomed me with such open arms, through being on the organising teams of London’s Calling, the London Salesforce Developer’s Trailblazer Community Group, and WordCamp London 2019.

And now’s your chance to get hooked, with WordCamp London taking place during the weekend of the 6th – 7th April (with a contributor day on the 5th). If you have any involvement with WordPress, be it as a user, designer, or developer then there’s great content for you, and at just £40 for the two day conference ticket it’s mind-blowing value.

AngularZone Sept 2016 Meetup Review

I’ve got to be honest, when this meetup’s talks were announced I honestly didn’t know anything about GraphQL – in fact the only mention of it I’d seen (or taken notice of) was this one;

And with this in mind, and the fact the last AngularZone meet was so good, I was more than eager to make sure I went along… and of course it gave me a chance to sport my new MobileCaddy tee, too.

beta-tee

As well as these physical meets, Gerard has been putting on web based “JavaScript – Ask me Anything” sessions too, though I have yet to partake in those.

Now, I have some thoughts about the meetup and venue as a whole, but for now let’s jump straight into the talks.

Progressive Web Apps in the Real World – Dean Hume

PWAs are creating a lot of noise at the mo – and rightly so – and Dean “Deano” Hume was here to give us the latest lowdown on them, and talk about how their features can be used in the real world.

PWAs are built using an emerging set of web standards, and essentially offer web developers the tools to bring native-esq experiences to web sites and apps. Such capabilities include Push Notifications, Geo-location access and other hardware APIs including bluetooth and NFC.

Dean Hume presenting PWAs at AngularZone

Part of the awesome-sauce that powers PWAs are Service Workers. These are also being pumped highly in the web dev world, and they enable support for many cool enrichments to standard “web sites” as well “web apps” (and no, I don’t know what the difference really is, or even if it’s important). I’ve seen many talks on Service Workers and on the whole they’ve been very good, and normally have covered different uses, approaches, and features. But one thing they all include is a statement like “Nope, sorry, Safari doesn’t support them”.

Service Workers provide a dev with the ability to intercept network requests before they leave the browser, and this can be used to provide offline handling, low-data requests and probably plenty of other use cases that haven’t yet been thought of. Speaking of which, Dean covered a scenario using Promise.race in a Service Worker that provided an improved experience for when a third party library failed to load, and meant that the page was able to load much more quickly – very cool.

Dean showed us a few other PWA features, including;

  • Add to home-screen
  • Push Notifications
  • No-connectivity handling – being able to give the user at least some basic information offline.
  • Handling Chrome’s Data Saver.

Along with the great demos and info, Dean also supplied an incredible amount of links to online demos and resources… so check out his slides for all the details.

JavaScript Jeopardy – Tracy Lee

Now, I won’t claim to understand what happened next. But it was fun, so I’m just gonna leave this picture here and you can make of it what you will.

Angular Jeopardy - WTF

Following on from this, erm… experience… Tracy and Gerard went on to tell us about ngCruise. This is a new Angular conference with a difference. Yes, you’ve guessed it, it’ll take place on a cruiseship. The website should be launching this week but the plan is for the conference/cruise to commence by bobbing out of Florida in May 2017, and will comprise of a few days of talks, programming and fun. Tracy is hoping it’ll be a few hundred USD per day and should include talks, food and of course accommodation (with a difference). CFPs should open soon.

Angular Connect – Peter Bacon Darwin

Peter and Gerard gave us a nice little fireside-chat type thing, discussing the upcoming Angular Connect conference (27th/28th Sept). They mentioned how they were updating the format slightly, from last years conf, to try to emphasise some of the more interactive sessions. I can only imagine that the conference is going to be ace… as I’ve once again had to bail on getting a ticket.

Angular meets GraphQL – Uri Goldshtein

Closing us off was Uri Goldshtein, who had literally only just flown into London. Uri is part of the Apollo team and was hear to give is an introduction to GraphQL, and although his talk title mentioned Angular, it was mostly a generic intro. This was fine with me as I had virtually no idea about GraphQL, whatsoever.

Now I won’t try to come across as a GraphQL expert following the talk, in fact if anything I have more questions now than before… so as well as writing down what I think I grasped from the evening, I’ll also suggest that you take a look at the GraphQL website for yourself.

But anyhoo, GraphQL was born out of Facebook, late 2011, at around the time Mark Zuckerburg dissed web tech for mobile, and went all native on us. It is designed to be a “Query language over your existing data”. It can be used to provide a middleware and protect your clients from evolving backend APIs and updates. It’s also type-based, and should allow for absolute understanding between what a client asks for, and what it receives. Part of this middleware behaviour includes splitting single request out to multiple backends, and bundling the responses to each up into a single response for the calling client. This kind of architecture can mean drastically simplified client code… and that’s definitely a good thing in my book.

Uri demoed Instagraph, built by Kamil Kisiela, and showed us a very neat GraphQL editor/runner called Graphiql. During the demo Uri spoke about how the use of GraphQL allowed for “optimistic UIs”. This is an approach where UIs update as soon as an action, such as liking an Instagram photo, is invoked, and that actually these changes take place before any round-trip to the server/backend is made. This approach is one that we automatically use at MobileCaddy, though we tend to include this under the Offline First banner, but it’s nice to know this specific UI handling has it’s own name too.

Users of GraphQL, other than Facebook obviously, include Pinterest, Github and Shopify.

Despite Uri being a really passionate and captivating speaker, I’m not entirely sure I’ve “got” GraphQL yet – I don’t know whether it’s available simply through client side and server side libraries, or what transactional performance overhead, if any, comes into play. I would love the chance to see him and again and have a good chat about it all. With this in mind I think I’ll do some digging into whether or not I could sit GraphQL in front of Salesforce’s SOQL. So why not go out and start playing.

Wrap Up

In all this was another excellent meetup, and Gerard deserves high praise for organising such great talks and food (burritos) and drink. The inclusion of prize draws (FREE TICKET to ANGULAR CONNECT) is a really good touch. Thanks to go to eSynergySolutions for sponsorship and assistance.

Sadly, turn-out was relatively low. I counted less than 50 attendees, which is a shame as well over 100 had RSVP’d “Yes”. I found that there was little chat among attendees, and I also noticed this at the previous meetup. Whether or not it’s due to the size of the venue, or the fact that folk were sitting in the hall before and between talks, rather than around the breakout area, I’m not sure. At other meetups I attend, these “before and after chats” are one of the really valuable and attractive things. Maybe next time the hall can be “closed” whilst talks are not on, and hopefully they’ll be a deliberate post-talks-chat arrangement too?

Regardless of the above I definitely recommend coming along to these AngularZone meets if you’re in and around London and have interest in anything JavaScript, not just Angular.

Until next time… oh and please be in touch if you want to sponsor me to attend ngCruise 😉

AngularZone July 2016 Meetup Review

I hadn’t been to any meetups in quite some time, but this inaugural meetup of the new AngularZone community had a lot of draw… Service Workers, D3, prizes, and more.

The meetup was organised by Gerard Sans, who has a history of speaking and organising meetups. It was held in the large hall of the Skills Matter CodeNode venue, which is a perfect venue for a meetup of a decent size.

As it was the first meetup for AngularZone, Gerard gave us a brief intro to what his view was for it. His idea is that physical meetups will take place once every two months, and have topics on web tech in general, and in particular Angular. He’d like to see talks, and a community, driven by passion. As well as the meetups and obvious greatness of tech talks he would like to see a community contribution program come into affect, where folk (including himself and Todd Motto – that guy gets around, right) can give advice as seasoned speakers and bloggers. It sounds not to far removed from his previous Angular Labs idea, though to be honest I didn’t get involved in that, so this is purely guesswork.

But anyhoo… on to the talks

Service Workers – Phil Nash

Up first was Phil Nash talking us through Service Workers. Now these are not overly new, but still very much in the early days of adoption. If you are new to Service Workers though, you can start by thinking of them an intelligent way to support offline behaviour for your web sites and apps. They’re the successor to the painful-to-understand-implement-manage app cache tech and have been greatly pushed with the current rise of the PWA (Progressive Web App).

We were, of course, shown the awesomeness that is the trailer for Service Worker, and I felt sorry for AppCache, so I put one together. I could apologise for the distracting gif, but I won’t, and I still pronounce it Gif, not Jif, deal with it.

AppCache, The Trailer
AppCache, The Trailer

At the time of wrting, Service Workers are available in the latest builds of Chrome, Firefox and Opera, and are known to be being actively worked on in Edge… and in the words of Phil, “who knows about Safari”.

We were shown some demos that Phil had been playing on thath utilised the Twillio API. His demos used various features exposed through Service Workers (offline, notifications, background sync, etc). Service Worker is a very powerful browser feature, and one I hope that will soon be adopted so I can use it in the hybrid apps we’re building at MobileCaddy.

‘Service Workers, turning “online by default” to “offline first”‘
– Phil Nash, 2016

One of the key features I see available in Service Workers over AppCache is the ability to programatically blat assets from the cache, and I can not wait to use it and say good ridance to AppCache.

Phil’s talk was really interesting and very well presented. His passion and knowledge were obvious. If you’re after his slides, they can be found here.

Using D3 with Angular2 – Ændrew Rininsland

Ændrew is a journalist/data wrangler at the FT and set off to take us through using (the bloomin’ black-magical D3.js) in Angular2 projects.

His talk started off with some comments on TypeScript and how having typed languages should catch silly bugs earlier on in a project’s lifecycle (though he also mentioned a blog post that argues that there isn’t any factual proof of this). Something that is hard to argue with about TypeScript though is the benefits of it’s self-documenting characteristic, which can only be a good thing.

“Angular devs are cooler than React devs… Just sayin'”
– Ændrew Rininsland, 2016

Before we got to any real D3, Ændrew also gave a few personal observations of ng2;

  • On a blank ng2 project – Never has he had so much code, over so many files, doing so very little
  • ng2 is really fast

Even being fairly new to ng2 myself, these points certainly ring true with me.

After much config hacking and setup, we  finally got around to seeing some D3 code, which by comparison was relatively short and straight-forward – in a “my mind can’t take in any more info” kind of way. I’m not sure if I’ll ever get over how magical D3.js is and how much sorcery their implementors use to bend it into shape, but the output of beautiful data visualisations always blows my mind.

Closing

Gerard had a few prizes to be won, which is a nice touch for a new meetup, so kudos to him. I even won a year’s JetBrains license… so even better.

Talking of free-stuff now’s a good time to thank Gerard for putting on a really interesting meet and to the sponsors (skills matter, eSynergySolutions, poncho8, JetBrains, Google Developers) for covering the venue, food, drinks and prizes.

Talks were recorded and should be up on the skills matter site in the near future.

The Easy Way to Add Widgets to WordPress Content

In my experience of building and maintaining WordPress web sites it is quite a common to want to put some related blocks of information into your main post’s or page’s content, inline. For example you might want to add a tag cloud or a list of related posts. This type of information is already available via WordPress widgets and of so you could add it to your sidebar (if you theme and template supported one). But what if you want to add the tag cloud into the middle of the post… like this;

Wow, pretty cool eh?

So this is possible today using my 5* rated Widgets on Pages plugin. With the plugin installed you can create a new Widgets on Pages sidebar, add your Tag Cloud widget to it, copy the generated shortcode and then paste that into your content. But now it’s even easier…

Introducing Turbo Widgets

I’ve recently created a new plugin for WordPress, called Turbo Widgets. And with this, WordPress widgets can be added to posts and pages using the nice WYSIWYG editor… click, click, click, BOOM!

Turbo Widgets Demo

There’s a free version of the plugin available on the WordPress.org plugin repository that has this nice GUI for adding widgets and there’s also a premium version that supports the ability edit the widgets too, again using the TinyMCE WYSIWYG editor.

And Turbo Sidebars?

As well as this, the premium version also supports Turbo Sidebars. These are custom content areas that can hold standard WordPress content (text, images, etc) as well as widgets added through the Turbo Widgets features. These content areas can then also be added to posts and pages via shortcodes (soon through the WYSIWYG too) . You can also use template tags to add these Turbo Widgets to your themes templates, say for example adding related posts to the bottom of each blog page.

The documentation page for Turbo Widgets contains further info on how to use these, but I also hope to blog through their usage too in the near future.

Solution: No popup for Skype Incoming Calls

I recently updated my Ubuntu setup, which involved upgrading to 14.04 and also moving my monitors/laptop screens around. An unwanted side affect of this was that when I was receiving an incoming Skype call I wouldn’t see the usual popup alerting me. This meant that although I could hear the ringing, I could not answer the call. The issue was that the popup was appearing off screen rather than it not appearing at all. A quick search led me to this post on the Skype forum that mentioned a solution through modifying the ~/.config/Skype/Skype.conf file. This file (or mine anyway) contained lines that look like this;

[IncomingCallPopup]
position=@Point(58 400)

By modifying the values I could easily adjust where the call notification would pop up. There’s also a handy Test Event button in the Skype Options tool which means you can simulate the incoming call to see where the popup appears.

skype