Cypress.io where have you been all my web dev life?

Probably, the better title would be: where have I been all of Cypress.io‘s life? Now on version 5.1.0 as of this writing with more than 200 releases showing on GitHub, it’s projects like Cypress that make me wonder what rock I’ve been living under when it comes to exploring website dev testing platforms.

I had it installed and running tests on my simple resume website in about 10 minutes. Obviously, a comprehensive web app would take longer and, of course, require more comprehensive testing than a 10 minute run through. Still, Cypress provides an easy to implement testing platform that’s a great fit for a broad spectrum of web development. There are shortcomings, but the majority of web development (especially SPA) isn’t going to fall into those categories.

Setup in a project, is super simple:

npm I cypress --save-dev
node_modules/.bin/cypress open

The above gets you started with a solid set of example scripts. Cypress has a boatload more examples to play around with.

For my example, I have concurrently installed and just added the following script:

"dev-cy": "concurrently \"next\" \"node_modules/.bin/cypress open\""

I made some basic tests on a resume website that I built for myself and ran through a series of viewports. Then, with a viewport selected, you can actually run through each of the tests and see the test elements on the specific viewport. Here it is in action…

AWS CloudWatch Lambda Functions No Log For You! (solved)

Edited with solution at the bottom…

I had a lambda function on AWS that I wanted to check the logs on. I had it setup with CloudWatch permissions, and I was able to see the summary metrics on the Monitoring tab. So, I was a bit surprised when I saw the following:

Other Lambda functions were logging fine. Just not this one. I tried switching the role under permissions, and even tried deleting it and adding it again (it was a dev only function) and no luck with the CloudWatch logs. I’m just going to chalk this up as luck of the draw for getting logs that are viewable in CloudWatch…

If you happen to encounter this same issue, just know you are not alone 🙂

If you happen to have a solution, feel free to add a generous comment.

Solution

I created a new IAM policy that has the same CloudWatch permissions as the AWSLambdaBasicExecutionRole. I then attached that policy to the role assigned to my Lambda function. I executed a test of my Lambda function and then went to CloudWatch. Sure enough, there was my group and my test call had logged properly!

I then switched the permissions back to the original, and executed another test of my Lambda function. The new test logged correctly. This issue kinda reminds me of the SignatureDoesNotMatch issue I encountered back in March.

Getting Started with Strapi and Cloudinary + new npm package

The first time I looked into Strapi was 2019. It looked like a project going in an interesting direction, but I didn’t play with it much. With time to spare on my hands over the last few months, I figured I’d look at Strapi again. It’s come a long way!

There are plenty of great resources online about Strapi, so I’ll try to avoid being redundant. There’s a great post on the Strapi blog about a building a starter blog that even has a one click deploy to Heroku! I figured that would be a great starting point to learning the basics, and it saved me the hassle of doing my own deployment. More importantly, it got me looking into Cloudinary (I’ll come back to that in a minute).

After playing around with that, I received an email from Strapi about building a corporate website using Next and Strapi. This is a great intro to the Strapi concept of single types as well as components.

The basic idea with this repo being that you have a global set of components for setting your core metadata, favicon, navbar, notification bar, and footer that will be used on all pages. Of course, the metadata component is also placed on the page collection type, allowing you to define the metadata on a page-by-page basis. You then add the components you want (and the Strapi team has built a fair number of common website elements as components) so that you have a fully functional website CMS.

Both of those demo repos use Cloudinary for their media management, so I took a dive into Cloudinary to see what it’s all about. WOW! What a great DAM system! They have an excellent free tier to get your feet wet, and realistically handle any developer prototyping you might come up with. The image transformation features are DEEP, and the best part is they have a ton of documentation and training/tutorials available to get up to speed quickly.

There was one issue though… Strapi was placing everything into the root Cloudinary root. So, I figured it’s time for me to make my first npm package. To be clear, I really just stole the existing strapi-provider-upload-cloudinary package and modified the code to give you the ability to specify a folder structure when you upload an image using Strapi as well as define a default folder.

So, let’s say you are using your Cloudinary account for more than one project (Project A and Project B). For Project A, you make your default_folder project-a, and for Project B, you make your default_folder project-b. Then when you upload the images/videos, they will default into their respective project folders. And if you want to have sub-folders, you just change the name to include the folder structure at time of upload. Further details and images are available on the GitHub page for the package.

Let’s say you have assets that you want to use on Project A and Project B… Well, just upload the resource with a leading / and it will place it into your Cloudinary root (along with any folder structure you provide), and then use it for all your projects!

One import note regarding new Cloudinary accounts and PDF files. By default, Cloudinary blocks the delivery (not upload but delivery) of PDF files for new accounts. According to their support, you can email them to have that restriction lifted. I have yet to confirm that, but based upon how responsive Cloudinary has been on everything so far, it’s likely valid that they’ll lift the PDF delivery blocking if you request it.

All that said… I’m loving Strapi for rapid API prototyping and Cloudinary for an extremely powerful DAM platform!

AWS S3: SignatureDoesNotMatch (getSignedUrl)

Setup a new S3 Bucket with IAM User, and went to upload the file after making a call to getSignedUrl. I thought I had everything right. Double/triple checked everything. Turns out the initial Access key ID I received from AWS just didn’t work. Created a new one, and magic.

Apparently, I’m not the only one who has encountered this baffling issue and magical solution. Hope this helps anyone else who encounters the error: SignatureDoesNotMatch: The request signature we calculated does not match the signature you provided. Check your AWS Secret Access Key and signing method.

Metro Bundler error: Invalid regular expression | node > 12.9 Windows

TLDR: If you’re doing React Native Expo development on a Windoze machine and have node version > 12.9 Metro Bundler will fail with a regex error:

error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class.

Seems like two fixes for this:

1. Downgrade your version of node, as stated on this expo-cli GitHub ticket
2. Update the regex in metro-config/src/defaults/blacklist.js:
   from
   var sharedBlacklist = [

     /node_modules[/\\]react[/\\]dist[/\\].*/,

     /website\/node_modules\/.*/,

     /heapCapture\/bundle\.js/,

     /.*\/__tests__\/.*/

   ];

   to

   var sharedBlacklist = [

     /node_modules[\/\\]react[\/\\]dist[\/\\].*/,

     /website\/node_modules\/.*/,

     /heapCapture\/bundle\.js/,

     /.*\/__tests__\/.*/

   ];

   note the additional escapes in the expr: /node_modules[\/\\]react[\/\\]dist[\/\\].*/,

   the difference is very subtle

Hoping this helps anyone encountering this issue. If you don’t downgrade node (which might not be an option for everyone), then every new project or any time you npm i, you’ll need to perform this regex replacement in the metro-config/src/defaults/blacklist.js file.

Email field with space in React 16 backspace issue

TLDR: There’s an “issue” with backspace in an input type=email field and React 16 that has a conversation going on here.

While working on a React project, a testing “issue” came up while testing an email input field. I use “air quotes” here because… Well, spaces in email fields aren’t really a thing you’d happen upon in common real-world scenarios. Nonetheless, it’s a legitimate (albeit, non-critical) issue that you may encounter during dev/testing of a React app.

A tester was testing a login form and entered “Here is a test” into the email field to test if the field validation was working. Sure enough, that input was identified as an invalid email address. Okay! Time to go home. Until they tester started backspacing in the email field and found the cursor suddenly jump to the beginning of the field when backspacing over the space. In other words, the cursor jumped from the a to before the H at the very beginning of the email field and did not delete/backspace over the text.

After sleuthing, I found the above mentioned link. Linked here again if anyone encounters the same “issue” while testing backspacing in an input type=email field while developing in React. GitHub poster’s fiddle demonstrating the issue can be found here.

npm install bcrypt fails on Windoze

Getting started with a fresh windoze dev environment and went to install the npm bcrypt package. Ended up with an error while building… Found many recommendations to just install bcryptjs, which wasn’t an option I was interested in. Found some sage advice of (Powershell with Admin rights):

//Temporarily disable Real-time protection within Windoze Defender
npm install -g node-gyp
npm install -g --production windows-build-tools

went with that instead. npm i bcrypt worked like a charm!

Hindsight Bias

With hindsight bias, we wish to know now what we knew then

Disagreement

Disagreement without being disagreeable paves a brilliant future

Forecasting

Forecasting primes