We’re about to release the next build of Squirrel (1.18).  As part of our release process, we write the release notes, a blog and host a webinar to talk about all the new things we’ve added and fixed.  Whilst collating this “what’s new” information, it got me thinking about a feature which hasn’t quite made it into 1.18.

As part of the webinar we will be announcing a soft release of Designer in the Browser or DIB, as we call it internally.  DIB is a browser-based experience for the Squirrel design tool. We have put a lot of effort into DIB and we were aiming to fully release it as part of 1.18. However, whilst testing we noticed that for browsers with slow internet connections, the loading experience wasn’t great. We needed to fix that experience, but did not have time to fully test the changes without impacting the 1.18 release schedule.  Instead, we’re going ahead with a soft launch in 1.18 (with the known performance behaviour) and will address load times as part of the next release due out in Q1/Q2 of 2025.

Loading Performance

So, what was the issue with loading performance?  Squirrel at its core is a web application.  It is made up of HTML, JavaScript and CSS.

• HTML – tells the browser what elements to display on the screen
• CSS – tells the browser how to style the HTML elements
• JavaScript – adds all the interactivity to the HTML elements, and is the brains of the application.

When you launch the Squirrel Designer in the browser, the HTML loads first.  This then tells the browser what and where to download the CSS and JavaScript resource files the application needs.

Squirrel is an Angular application.  That means we create lots of HTML, CSS and JavaScript code.  When we produce a production build, the Angular compiler concatenates and compresses all that code into a small number of JavaScript files.  One of those files (our main JavaScript file) had grown to over 10Mb.

Up until now, because Squirrel has been a desktop installation, we’ve not really considered the size of these resource files. However, when moving the design experience to the web these file sizes can make a big impact. When opening DIB the browser has to download that 10Mb JavaScript file before it could render the application for the user.  This isn’t a problem for high-speed internet connections. But for low bandwidth scenarios (like when I was in a hotel in Arizona) you can really feel that loading delay.

Getting Lazy

This is where lazy loading comes into play.  In its current form, Squirrel loads all the JavaScript files as soon as the HTML page is opened.   When there are large files, this causes the UI to lock up until all of the file has been downloaded.  Once all the files have been downloaded in the browser the application becomes usable.  Lazy loading is a paradigm shift, so that the application only loads the JavaScript it needs, when it needs it.  Splitting that 10Mb file into multiple smaller files that are loaded on demand.  Our 10Mb JavaScript file is now a collection of smaller files. On average these files are around 150Kb in size, so much quicker to download even on slow internet speeds.

On the surface it sounds like this has solved all the performance problems, but it’s more complicated than that.  Lazy loading has increased the number of files that the browser needs to download.  Browsers have a restriction that throttles downloads to a maximum of 6 concurrent files. This means that the 7^th file requested must wait until one of the preceding 6 has completed before it starts the download.  So, we may have solved performance issues with downloading large files and replaced it with new performance bottleneck as the browser queues up downloading multiple smaller files.

Testing Testing Testing

The only way to know for sure whether lazy loading solves the performance issues is to test.  Refining our lazy loading implementation as we go, to find the right balance between file size and file quantity.  This all takes time and effort, which is why we couldn’t delay the 1.18 release to include this solution.

Our testing needs to not only account for different download speeds but geographic location, hardware specifications etc. as well.  We are leveraging tools like LambdaTest to allow us to test our updates from different geographical locations and on different configurations of hardware.

Switching to support a browser-based design experience has been a real shift to our development approach.  We now must consider things like file size, bandwidth, browser restrictions when building and testing.  However, this focus has resulted in improving the experience and performance of both the desktop and DIB design application.  We will be taking the lessons we’ve learned to see what we can apply to the runtime experience.

Nowadays it seems that AI is being added to everything, from content creation platforms to mobile phones. I’ve even seen an AI powered toaster which monitors the “toastie-ness” of the bread to guarantee “the perfect piece of toast every time”.  Seems we’re only one step away from “Talkie Toaster” from Red Dwarf.  Phrases like “Now with AI” are becoming the go to marketing tag to indicate your platform, service, or toaster is cutting edge.

Aside from the practical applications of AI in end products, there is also a growing place for AI in more traditional creative, analytical and development roles.  My background as CTO is obviously technical, so I have more of a leaning towards the application of AI in development. Mel, our Chief Experience Officer, is seeing a similar trend in her creative teams.

Using AI whilst developing

With the proliferation of programming languages, not to mention the constant evolution of frameworks, design patterns, API’s etc, means that it is impossible for one person to know everything.  Software developers will have an area they focus or are more proficient at. However, even then you will hit a bug, or an issue, or a requirement that makes you stop and think.  Historically you would spend a day contemplating the challenge.  Or you could run it past a colleague, in more recent years you can post and search questions on StackOverflow.  In today’s LLM / AI age, ChatGPT has the answers, or does it?

Just like with asking a colleague or searching StackOverflow, ChatGPT can inevitably give you incorrect and sometimes crazy answers.  The oracle you’re asking is only as good as their own knowledge.  In the past, a developer might trawl through this out of date, misleading and conflicting information and derive the nuggets of insight to let you solve your dilemma. The answer very rarely is already written for you, you have to take inspiration and then create your own solution.

With services like ChatGPT you can pose technical questions and receive, on the surface, great responses.  They not only provide the code, but they also provide an explanation as to what the code is doing.  However, we need to view the quality of this code through the same sceptical eye we would if we found a piece of code on StackOverflow.  It’s like asking a colleague who thinks they know the answer but they tell it to you confidently so you blindly believe them.  In the LLM / AI world this behaviour is called a hallucination, where the AI model generates incorrect or misleading information in response to a prompt.

Just recently I was explaining a simple application’s architecture to a colleague.  I’m used to the AWS landscape, but my colleague is more familiar with Azure.  I asked ChatGPT for the Azure terms for things like S3, Cloudfront CDN etc.  It was great and I was able to convey the architecture in Azure terms.  I then asked if ChatGPT could draw a landscape diagram of the AWS vs Azure solutions.  I was expecting a line drawing of a few interconnected nodes, instead I got this:Even though I asked the question and know the subject matter, I am still not 100% sure what this picture is showing.  I don’t know what AWZ is, or “Crotic Barrantion”, never mind “Azuue App Sanvication”.    To me, this is a great example of an AI hallucination.

It goes to show

“AI is only as good as the quality of the source material it was trained on.”

And if ChatGPT was trained on sites like StackOverflow, then there is a lot of noise to fight through to get those nuggets of information or insight.  And sometimes, as with the above image, AI just seems to throw all caution to the wind and get creative.

All is not lost

That said, all is not lost.  As part of my job, I still get my hands dirty with coding.  More recently as part of our ongoing R&D activities.  This means I am trying to solve challenges in creative new ways or prove out new concepts and capabilities.  As a result, I am regularly stumped with development challenges. I find myself leaning more on ChatGPT than on StackOverflow for my investigations.  I am also finding that I am spending more time in curating the questions that I am going to pose to ChatGPT.  Gone are the short keyword specific search terms, trying to hit some magic SEO through Google.  Now I am putting context into my question, explaining what I’m trying to accomplish, how it should fit into an existing workflow, what I’ve already tried etc.

Earlier this year I was talking to a customer at our company conference. And we commented that the complexity and thought that goes into phrasing questions to LLMs like ChatGPT is becoming a science in itself.  So maybe my statement before that AI is only as good as the quality of the material it was trained on, is only half the story.  The other half is that:

“The answers you get are only as good as the questions you ask”

Indeed, we’re now seeing jobs and training courses advertised for AI Prompt Engineers, whose job it is to tailor the best, most efficient and accurate prompt for an LLM.  There are even LLMs that you can use to help you build questions to ask other LLMs.

It’s fascinating to see how AI is evolving, and where it is having an impact.  I just hope companies, like the one producing the AI toaster, consider the long-term implications of AI in products. Otherwise, we could end up with neurotic products like “Talkie Toaster”, or automatic doors and elevators with “Genuine People Personalities” ala the Hitchhikers Guide to the Galaxy.

It’s been like the Hokey Pokey for PWAs on iOS over the past couple of weeks (Or the Hokey Cokey for the people from the UK). Progressive Web Applications, or Home Screen web apps as Apple calls them, have been a hot topic since Apple released beta access to their newest operating system, 17.4, a few weeks ago.

What is a PWA?

Progressive Web Applications are web apps that can look and feel like native applications on phones, tablets, PCs etc. They are installable, so once on your device, you can access them like any other application you have installed. In v1.16 of Squirrel365, we added support for PWAs. Your published project can now be treated as a PWA and be installable.

Apple are causing a stir…

However, in Apple’s beta release of iOS 17.4, They have made changes to accommodate the Digital Markets Act (DMA). The DMA is an EU regulation aiming to make the digital economy fairer. Apple has been responding to the regulation to open app stores and browser capabilities for other companies to use. Citing security risks, Apple also removed support for PWAs, causing a bit of a stir in the developer community.

The EU responded by opening an investigation into Apple again. And groups such as the Open Web Advocacy group, sent an open letter to Tim Cook at Apple to lift the ban. On Friday (1st March), in a surprise U-turn, Apple reversed its decision. Support for PWAs will go back into iOS 17.4.

How does this affect Squirrel365?

It’s been a roller-coaster of a few weeks for us. Having just released support for PWAs, then all that happened! Even though these changes will only impact our EU customers, we see an opportunity to accelerate our plans for PWAs in Squirrel365.
Initially, we kept the implementation light. Just enough to show off the potential of progressive web applications. Our goal was always to support more capabilities and distribution options. Ultimately, we plan to enable the release of PWAs as native applications to the app stores on Apple, Android, Windows etc.

With the potential for PWAs to be broken on EU Apple devices, we bumped “publishing to app stores” up our roadmap list. And despite the latest U-turn, we are not taking our foot off the gas. Phase 2 of PWAs is in R&D, and we’re actively working on native publishing as part of this phase.

As soon as we have any updates, I will share what we’ve done. In the meantime, let’s hope the PWA Hokey Pokey doesn’t progress any further with PWAs being “shaken all about”!

There’s no denying it – AI is a big thing right now! Looking on LinkedIn, Medium or other online publication sites, you see posts, blogs or stories about how company X or product Y has implemented AI.

But does Squirrel365 need AI?

As CTO of Squirrel365, my responsibilities include research and development. A key part of my job is keeping an eye on emerging trends and technologies and identifying opportunities to improve the product. AI fits squarely in that bracket, but I’m having a hard time finding a good fit. Something that isn’t a just gimmick or a marketing ploy.  Specifically, I’m looking for use cases where AI would add value to a workflow, or make something quicker or easier than doing it manually.

An Excel Formula Bot

My first thought is an extension of what Donald MacCormick wrote about last year, An Excel Formula Bot. We already have a formula helper in Squirrel which advises what arguments are needed for each formula. Could we extend that to take a more conversational approach and generate the formula for you?

It would certainly tick the AI box, but does it add value to the workflow? Squirrel users are familiar with writing Excel formulas, so I see needing a bot to create a formula as an exception rather than an everyday occurrence.  Would the effort to integrate the AI into our formula parser workflow, to generate and insert the formula bring enough value to justify it? However, a simple helper (imagine a Squirrel version of Microsoft Clippy) to give formula assistance could be a better implementation.

 

Impact Analysis

Flipping the paradigm on its head.  Rather than asking AI to generate a formula based on a problem definition.  Could we have AI explain to you what a complex formula is doing?

Earlier this year we introduced an Impact Analysis tool for Squirrel.  Amongst other things, it allows you to traverse the cell references that make up a formula or show you which other cells are using the output of a formula.  This is very useful when you’re tracing where values come from or go, but sometimes you hit a formula which you can’t easily decipher.  It may have been written by someone else, or you wrote it during a moment of zen-like inspiration which you cannot now re-attain.  Asking the AI to describe the purpose of that formula conversationally could really be a great enhancement to the Impact Analysis tool, or even another capability for the Squirrel Clippy (I’m starting to like this idea now).

 

Image Generation

I was talking about AI in Squirrel during the Squirrel Experience Q&A session, where Rob Scott asked whether AI could be used in Squirrel for image generation.  We already integrate with Unsplash to bring beautiful, free images and photos to Squirrel, could an integration with DALL·E be a useful addition to the Squirrel toolkit?

My initial concern for AI-generated images was around IP and copyright.  Looking at DALL·E from OpenAI, they have addressed those issues and the images generated can be used for commercial purposes.  However, I still have some concerns about AI image generation inside Squirrel365.

• How do we ensure it’s not a gimmick, just to say we’ve got AI in the product?
• Does it add value or improvements above and beyond Unsplash or other stock photo services?
• What would the user experience be like waiting for the image to be generated?

I did a couple of sample queries to generate a Squirrel clippy image.  The quality is a bit hit-and-miss (as you can see).

I think image generation is something to keep an eye on but doesn’t feel like a natural fit for Squirrel right now.

 

Colour assistance

I wrote about AI colour generation last year, where I asked AI to generate a colour pallet based on a phrase or description. Similar to Josh Tapley’s LinkedIn post about Coolors Dashboard Color Testing, my AI-generated output provided several hex codes to use in your project.   But if we’re looking to enhance Squirrel to integrate with AI then the output needs to be more integrated with the application and feel part of the workflow.

Last year we introduced simplified property panels in Squirrel. Part of the changes for this was the introduction of automatic accent colours.  For example, when selecting the colour of a button, it would automatically provide a contrasting colour for the text.  This was designed to prevent things like green text on a yellow button or dark text on black buttons etc.  We didn’t use AI for this, we just used some logic and colour theory to calculate the appropriate font colour. Could we change this to use AI instead?

I tested it out by asking ChatGPT to suggest a contrasting font colour to use on a button that is #22EE33 (bright green).

ChatGPT’s response was:

A common choice for good contrast with green is white (#ffffff) or a light gray color (#333333). These colors provide a strong contrast and make the text on the button easily readable

.

I tried both, and one is more readable than the other. This goes to show AI doesn’t always get it 100% right. If we were to integrate AI into Squirrel, I feel we would need to do it in a way that provides suggestions or pointers for improvements, rather than overruling your creative decisions.

Maybe this is another use case for Squirrel’s Clippy

Wrapping up

AI is an ever-changing landscape and has some great potential to enhance products. I’m yet to see a killer implementation in a product like Squirrel that isn’t gimmicky. However, that said, it is something I’m keeping my eye on and continuing to explore as part of our R&D.

Who knows maybe we’ll see Squirrel’s Clippy sometime soon?

Over the past couple of weeks I’ve been playing around with OpenAI to explore the possibilities of AI and specifically natural language processing.  Turning text and phrases into something that is usable within Squirrel365.  So far I’ve created a chatbot, a colour sentiment analysis tool and most recently a colour palette generator. Now I’m curious about AI generated images. All the user interfaces I’ve built to go on top of the GPT-3 API have been achieved using Squirrel365.

What is Squirrel365?

If you don’t know about Squirrel.  Squirrel is a no code platform which lets you build web applications and dashboards.  It uses spreadsheet behind the scenes as the brains of the application, so you use your existing spreadsheet knowledge rather than coding to get the behaviour you’re after.

DALL·E

On 3rd November OpenAI opened up their DALL·E API to the public, allowing people to start exploring the possibilities of image generation. DALL·E 2 is “a new AI system that can create realistic images and art from a description in natural language”.  You can find out more about DALL·E 2 here

Back to Squirrel

Last year we enhanced the image component in Squirrel, so that you could use Unsplash images.  Unsplash is a platform which provides free images.  We integrated with Unsplash so that you can search their collection of 1m+ images and use them into your Squirrel project.

I wanted to see what DALL·E was capable of, as I could envisage another enhancement to the image component.  Imagine being able to create a unique image from a text description that would fit seamlessly into your web application. As soon as I saw the API had been made available, I couldn’t resist having a play.

AI generated images

In the OpenAI documentation they showed a sample image created from the following phrase

A photo of a happy corgi puppy sitting and facing forwards, studio lighting, long shot

That looked good, although the phrase was a simple one.   I tried a more complex phrase next, trying to throw the AI off.

A beagle playing a bugle

An odd composition, but unfortunately met the brief in what I asked for. Keeping with the canine theme, I tried another.

A staffie eating a Mr Whippy

(not sure if Mr Whippy is known around the world, but it’s a type of ice cream)

Seems the AI likes dogs. All the images generated so far have been photos, my next attempt to throw the AI was to ask for an illustration instead.

An illustration of a robotic squirrel

Even tried to mix it up and get a cyberpunk version

Back to the point

Anyway, enough messing about.  Experimenting with the API has shown me how powerful OpenAI and DALL·E can be, and it will only get better as time goes on. I can absolutely see this being useful within Squirrel to provide that perfect image for your project.  This is still only in our R&D labs, but is something that I believe warrants further investigation and consideration. This could be a great use of AI in our no code platform.

Following on from my recent foray into GPT-3, OpenAI and Squirrel365.  I have been trying to think of a use case for GPT-3 and Squirrel which is not gimmicky.   The chatbot I created, whilst fun and showcases what you can do with Squirrel, isn’t really something you would use in real life.  However, the colour sentiment analysis got me thinking about colour palettes.

Colours and colour palettes are important when you’re building a UI.  Whether it’s for styling buttons, text or even chart series.  You need a good selection of colours which complement each other.  With that thought in mind I dove back into the OpenAI playground to expand my colour sentiment analysis query into a colour palette generator query.

How do you use OpenAI?

Taking a step back, here’s a brief explanation of how OpenAI works.  Using the playground you write a phrase or question and submit it to the AI to respond.   There are loads of configuration options you can select, like:

• which GPT-3 model to use,
• how random you want the responses,
• how many credits you want to spend on the query.

Note that the length of the question and the length of the answer all contribute to how much the query will cost.  Details of on the price breakdown can be found here.  But in brief, a token is used up for approximately for every 4 characters in your question and response.  Tokens for the GPT-3 model I was using cost $0.00002 each.

As an example this phrase would costs 15 tokens to ask the question.

Using the playground I went through iterations refining my question.  I needed to ensure that I received the response I wanted.  For the colour sentiment analysis the phrase was simple:

What is the CSS code for a colour like value

Where the value is the text the user entered into the prompt in Squirrel.

Colour palette generator

For the colour picker I needed more than just one colour and I wanted to make sure the colours worked well together.  (as well as the AI thinks they work together).  Tying this all together I created a Squirrel project which puts a UI on front of the OpenAI query.  It allows you to provide a phrase or description, and then get the series of complimentary colours back.  You can paste these colours into your Squirrel spreadsheet and use them in your project.

You can also give it a try here