AppsScriptPulse

Master Google Apps Script UIs — Part 5: Unit Testing Your Front-End With Jest 🚀

Introduction 📝

Well, well, well! Look who’s back for another session of “Weaving Magic with Code”! 😄 Today, we’re diving head-first into the magical world of unit testing. You might be wondering: “Why the fuss about unit testing?” 🤔

Unit testing, my friends, is the silent hero of software development. Picture it as a mini-pit stop where your code gets a once-over before it hits the road. The automated tests ensure that our code does exactly what we expect it to. The benefits?

  • Makes us ponder deeply about our app’s architecture, like a philosopher musing about the meaning of life 🧐
  • Forces us to clarify our expectations from functions and classes.
  • Ensures that as we revamp and update our code, we aren’t unknowingly playing host to bugs, much like a surprise party you didn’t want 🐛

Source: Master Google Apps Script UIs — Part 5: Unit Testing Your Front-End With Jest 🚀

Master Google Apps Script UIs — Part 4: Spice Up Your Project with Dev Dependencies! 🔧

Introduction

Welcome back, code wranglers! Today, we’re diving into the world of developer dependencies that make developing projects more efficient than a coffee-fueled coder on a deadline. 🚀 You can find the complete source code in the part-04 branch of the Github repository. Also, feel free to mess around with this demo spreadsheet and play with Emojibar. I’ll be updating it with every new blog post!

What Are Dev Dependencies?

Dev dependencies are like your car’s GPS: they’re not necessary for the car to run, but they sure make getting to your destination a lot easier! 🗺️ They’re modules necessary for the development and testing processes of a project, but not for its production runtime environment. They’re not bundled with the source code and help automate tasks that would otherwise make you pull your hair out.

Source: Master Google Apps Script UIs — Part 4: Spice Up Your Project with Dev Dependencies! 🔧

Building the Ultimate Google Apps Script Front Ends. Part 3: Styling with Tailwind CSS 😎

Let’s take our UI to the next level with Tailwind CSS!

Introduction

In the previous article, we learned how to bundle NPM modules with Vite. Today, we’re going to add some style with Tailwind CSS. If you’ve been following my series, you’ll breeze through this like a true professional. 🚀

Check out the part-03 branch in the Github repository for the full source code.

 

What Is Tailwind CSS

Tailwind CSS is a utility-first CSS framework that makes styling a breeze. Think of it like a wardrobe filled with every piece of clothing that you’ll ever need, with everything neatly organized and ready to go. 💃🕺

Source: Building the Ultimate Google Apps Script Front Ends. Part 3: Styling with Tailwind CSS 😎

Building the Ultimate Google Apps Script Front Ends. Part 2: Bundling NPM Modules

Hey there, friends! 👋 Our Emojibar — yes, that’s what we’re calling it now — is coming along nicely! In the previous post, we learned how to bundle the project with Vite and vite-plugin-singlefile, and it’s now time to add some real functionality!

To complete our Emojibar, we’ll use two NPM modules:

  • Unicode-Emoji-JSON: We need a complete list of emojis, and this simple module provides them in JSON format. Perfect!
  • ToastifyJS: When users click on an emoji, it’ll be copied into their buffer. Just so they have some feedback, we’ll show them a confirmation toast. This library is great for this purpose.

We’ll also add search and navigation functionality, meaning that we’ll have the entire backbone of the application ready by the end of this post.

Source: Building the Ultimate Google Apps Script Front Ends. Part 2: Bundling NPM Modules

Building the Ultimate Google Apps Script Front Ends, Part 1: Bundling with Vite 🚀

 

Last week, we talked about the best way to build front-ends for Google Apps Script. Today, let’s roll up our sleeves and dive in! 😎

Source: Building the Ultimate Google Apps Script Front Ends, Part 1: Bundling with Vite 🚀

The Ultimate Google Apps Script Front-End Development Guide. Part 0: The Worst and the Best Practices

Welcome to the Ultimate Google Ultimate Google Apps Script Front-End Development Guide!

If you are reading this post, then you likely have experience with Google Apps Script. Essentially, there are three types of front-ends that you can create with Apps Script:

  • Web apps
  • Modal/modeless dialogues
  • Sidebars

In this blog post series, we will only discuss HTML front-ends, as this is where you can create the most powerful and sophisticated user experiences. Unfortunately, the Card Service is outside the scope of this series, and it is not nearly as powerful as an HTML front-end. With that in mind, Google, how about allowing HTML front-ends for Workspace add-ons?

Source: The Ultimate Google Apps Script Front-End Development Guide. Part 0: The Worst and the Best Practices

Using design patterns in Google Apps Script

Google Apps Script is a JavaScript-based language that has access to Google Workspace-specific libraries for Gmail, Google Sheets, Google Forms, Google Drive, etc., and allows you to quickly and efficiently automate your tasks and program business applications.

A lot of users try and quickly learn GAS and use it to make their lives easier. It’s all great, however the code we sometimes tend to come across on StackOverflow and other sites lacks best practices, hence I thought it was time to start bringing them up and I will start today with design patterns.

I’m all for copy/paste coding and it one of the things I love about the Google Apps Script developer community, there are lots of great snippets out there and in Pulse we’ve now over 800 posts and counting. When you start going beyond quick script solutions into more complex projects investing time planning how you’ll structure your code can save you headaches and frustrations further down the line.

Using design patterns are one way to produce better code that is more readable which in turn is more maintainable and can lead to faster development. This post from Dmitry Kostyuk a nice opportunity to learn about a design pattern for a very common use case of maintaining data in a Google Sheet from a third party API.

Source: Using Design Patterns in Google Apps Script

Using ChatGPT to Generate Fake Data in Your Spreadsheet with Google Apps Script

ChatGPT is pretty much a universal API: one endpoint to get any data.

Fake data is useful for testing purposes. At times, real data is too sensitive, and sometimes you do not have access to real data before production, but you need to begin working with something. Here is where fake data comes in.

We used to have a great library for fake data called Faker.js; however, Marak, the author, became so frustrated that he could not monetize the solution that he pushed an update that broke everything, which led to him being blocked on GitHub and NPM. As a result, the library is no longer maintained. ChatGPT, however, is not going anywhere.

Source: Using ChatGPT to Generate Fake Data in Your Spreadsheet with Google Apps Script

Three pitfalls to avoid when using the onEdit trigger in Google Apps Script

Illustration by ahmiruddinhidayat111198 on freepik.com https://www.freepik.com/author/fahmiruddinhidayat111198

  1. Making a Single Function Do Everything
  2. Expecting onEdit to Catch All Changes by Default

Source: Three Pitfalls to Avoid When Using the onEdit Trigger in Google Apps Script

If you use clasp with Google Apps Script, you need this environment switching utility right now!

When working in a team and/or with a client, you want to have multiple environments. At minimum, you probably want a dev environment (or multiple ones) in which you are working, and a test environment in which the client or your team can run acceptance tests before production. Of course, they must both be separate from the production environment. To push your code to the correct environment, you need to either update the .clasp.json file manually or keep multiple copies of your script with different .clasp.json files. Fortunately, things have just become significantly easier, as I recently built an app for this purpose called clasp-env, which is available on NPM. See the source link for details.

Source: “If You Use Clasp With Google Apps Script, You Need This Utility Right Now”