DEV Community: ctln88

The Top Five Free Tools to Improve Your Website Today

ctln88 — Thu, 20 Oct 2022 15:34:12 +0000

Are you a newbie website developer looking for free tools to improve your website? Look no further.

I’ve been building a website for the past year, and it’s a lot harder than I thought it would be! There are several “tricks of the trade” that no one tells you about. How do you write concise content? What about search engine optimization (SEO)?

Below are my favorite free tools that I use to improve the design, content, and SEO of my website.

1. Swipewell Marketing Examples

Need website design inspiration? Design is still tough for me especially because I don’t have a traditional background in web development. To spark inspiration, I use these marketing examples by Swipewell. Find examples of numerous web pages including about, pricing, and landing pages. In fact, I built this landing page based on an example SaaS competitor comparison page from Swipewell.

No need to reinvent the wheel. Use Swipewell to quickly search for relevant marketing examples.

2. Hemingway Editor

The Hemingway Editor is my secret to writing clear, concise content. Simply, copy and paste your text to the app. The editor will then highlight in yellow any difficult-to-read sentences. It will highlight in red any very difficult-to-read sentences. Additionally, it highlights adverbs, passive voice, and phrases with easier-to-understand alternatives.

The editor also gives your writing a “readability” score based on grade level. You may think writing at a higher grade level is best. But, it often means more complicated writing that will be difficult for the reader to follow. I always try to aim for Grade 6 readability or less.

This is a great tool to use to shorten and clarify any content on your website, especially landing page copy. The more concise you can make your landing page copy, the easier it’ll be for your reader to understand. Concise copy also makes it more likely that a reader will keep reading instead of bouncing due to frustration.

3. Undraw Illustrations

Let’s be clear, I understand that websites should include images relevant to your business or product. But, that’s not always easy to do. That’s why I use Undraw for any stock illustrations that I need.

Undraw lets you search for any illustrations that you want! You can also change the color of the images to match your existing website UI. The images are clean and classic, perfect for any website.

Undraw is also an open-source platform, so you can use any of their illustrations for free. No need for attribution either (of course, unless you want to!) Fun fact, the illustration for this blog post is from Undraw.

4. Google Lighthouse

Lighthouse is a free, open-source tool. It rates website performance, accessibility, best practices, SEO, and progressive web app (PWA) on a scale of 0 to 100.

The easiest way to use Lighthouse is to install it as a Chrome extension. Navigate to the website you want Lighthouse to review and click generate a report. Ta-da! It creates a free report with your website scores. Click on each score to see suggestions for improvement.

Don’t worry about scoring 100 in every category. Take the Lighthouse scores with a grain of salt and fix any issues that you can. I like to use Lighthouse to find any major issues with my website.

5. AHREFs

AHREFs is an “all-in-one SEO toolset” that you can buy to improve your website's SEO. But, there’s a secret. AHREFs offers a free website checker tool. First, input your website address. The tool will then check for website health, performance issues, technical problems, and SEO issues.

This is the best free SEO tool I’ve found! It provides extensive information in an easy-to-read format. If you’re not quite ready to pay for an SEO tool, I recommend checking it out.

Caitlin Fithian spent over 10 years working as an environmental consultant before becoming a SAHM in 2020. She is working to make a career change to tech. Currently, she works part-time for Simple File Upload as a marketing strategist. Follow her journey here or on Twitter as she learns more about marketing and no code while raising two small kids.

The Benefits of a SaaS Marketplace

ctln88 — Tue, 09 Aug 2022 01:49:58 +0000

Why do most developers build SaaS products? To solve their own problems. But what if you also want to sell your SaaS product? Where do you start? The answer, an existing SaaS marketplace.

What is a SaaS Marketplace?

A SaaS marketplace is a platform that offers cloud-based extensions to its users. These extensions are often referred to as applications, add-ons, or plugins. The purpose of these extensions is to supplement an existing product. Or, provide developers with an easier way to build their products. These extensions can be free or paid.

For example, Heroku is a platform as a service (PaaS). It enables developers to build applications. Heroku provides an elements marketplace. This is where developers can buy add-ons, buttons, or build packs. These tools help developers build applications faster and easier.

What are the benefits of launching your SaaS product on an existing marketplace like Heroku? Let's find out.

1. Built-In Distribution Plan

Marketing is often described as the hardest part of SaaS entrepreneurship. You're not a marketer, you're a developer. It's difficult to know how to organically market your product to users.

A SaaS marketplace can provide you with a built-in distribution plan. Heroku is a well-known, reputable marketplace with existing website traffic. You can take advantage of that traffic by listing your product in a relevant marketplace category. Ta-da, your product is instantly searchable on an established website.

2. Customer Validation

There are three add-on release stages when you launch a product to Heroku: alpha, beta, and general availability (GA).

The first stage is the alpha stage. At this stage, your product is only available to you and individuals that have been given access. These individuals are likely product testers that you've asked to trial your product and provide feedback. During the alpha stage, your product is not yet publicly available in the Heroku marketplace.

The next stage is the beta stage. To advance to the beta stage, you must have at least 15 users that have tested your product. Now, your product can be publicly listed on the Heroku marketplace as a free trial. During the beta stage, it's a good idea to continue to ask for feedback and improve your product.

The final stage is general availability (GA). Before you can move on to the GA stage, you must have at least 100 users that have tested your product. Now that your product has been tested and validated, you can start charging users. Congratulations!

Why does this multi-stage release system work? It requires that at least 100 users test your product before you can sell it. Thus, it's reasonable to assume you've found a good product-market fit.

3. Cost-Benefit Analysis

Marketing is expensive. According to a 2022 SaaS Marketing Guide, the average SaaS company spends between 15% to 25% of its annual revenue on marketing. If you're trying to launch your first SaaS product or a side project with no revenue, this cost is likely not manageable.

Why not tap into an existing customer base for free? Heroku already has customers that use its service. These customers are looking for products to enhance their applications. You win, and the customer wins. No need to launch your product into the abyss of the internet.

4. Simple User Integration

Heroku users need Heroku-specific solutions that are easy to install and set up. The first place that Heroku users will look to solve their problems is the existing marketplace. These products will be easier to use and faster to install.

For example, Heroku uses containers called "dynos." Dynos have ephemeral filesystems. This means that files that are not part of an application's slug are lost when a dyno is restarted or replaced. If you design a product that integrates with Heroku's ephemeral filesystem, then you've solved a Heroku-specific problem for users.

5. Easy Billing Process

Have you thought about how you're going to bill customers for your product? What about billing security? When you launch your product on Heroku, billing is taken care of for you.

Heroku allows you to price your product as a monthly subscription. You're able to add varying tiers to this subscription. Your customers will be automatically billed each calendar month. Heroku will also pro-rate any billing if a product was used for less time than the entire month.

No need to write and integrate complicated billing code. Let someone else handle the headache of billing for you.

Is an existing marketplace right for you?

Marketing takes time and money that you may not have. This is especially true if you're launching your first SaaS product or a side project.

Marketing also requires learning a new skill that may not interest you. Let's be honest, marketing is hard work, and it's not for everyone. If your passion is building products, then let a marketplace take care of the heavy lifting for you.

The Complete Guide to using a CDN with Rails Active Storage

ctln88 — Mon, 08 Aug 2022 20:39:23 +0000

In Rails versions prior to 6.1, Rails Active Storage only served files from an expiring URL that redirected to the selected service. This made it impossible to serve the files via a CDN. There were many workarounds to this problem, and fortunately Rails introduced the new proxy features for serving files from Active Storage in Rails 6.1.

What does the proxy feature do?

The proxy feature provides a permanent URL to an asset through your Rails application instead of an expiring URL. This enables you to put a CDN between your application and the browser. When a user requests an asset from your site the architecture looks like this:

The first time an asset is requested, it will be served by your application. On all subsequent requests, it will be served from the CDN. To test this, access a file served by Active Storage. Here is one as an example: View this link to see a proxied URL.

Open the “Network” tab in developer tools and request the resource again (i.e. refresh the page). You can see HIT in the cache headers, showing the file was served from a CDN, not from your application.

Why is this important?

A lot of the workarounds the community was doing before Rails 6.1 involved creating a direct URL using the object key and the desired CDN domain. There were a few problems with this.

First of all, if you were serving public files from S3, the storage providers usually required the domain name and the bucket name to be identical. This really became a problem if you were using wildcard subdomains.

Also, it made it tricker to switch storage providers. It was possible, but there were necessary DNS changes and the buckets still had to conform to the specified naming conventions.

With the new proxy feature switching storage providers is as easy as updating storage.yml in your Rails application. You can also now easily use wildcard subdomains and have more freedom in naming your buckets.

How do you add a CDN to Rails active storage?

Assuming you have Active Storage set up and you’re trying to add a CDN, all you need to do is update your routing and serving of files.

In your storage.yml, add the public:true setting to your configuration if you haven’t already done so:

In a standard Active Storage configuration, you serve the file using <%= image_tag(@user.avatar) %> (for example).

This provides you an expiring URL that redirects to your storage service. You’ll notice the URL typically has the word “redirect” in the path.

Using the default Active Storage serving service, the URL will look like the one below:

"http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6I-kJBaHBCZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–c5090cc1490554569fbdd6a90ad0f99ae1f416e8/matthijs-van-schuppen-8jGB-ud8MtI-unsplash.jpg"

Notice the blobs/redirect string in the URL. If you click an expiring URL it will redirect to your bucket and eventually expire. Which means it can’t be cached by a CDN.

To use a CDN, you need to change the URL to be permanent. One way to do this is to modify the routes.rb file and use the route directly.

In your view you can now use <%= image_tag cdn_image_url(@user.avatar) %>. If you look at the generated URL, you will see it now contains the string blob/proxy and when you click it you are not redirected to the bucket/key endpoint:

“http://localhost:3000/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJ-BaHBCZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–c5090cc1490554569fbdd6a90ad0f99ae1f416e8/matthijs-van-schuppen-8jGB-ud8MtI-unsplash.jpg”

If you don’t have your CDN set up at this point, you can use your app host in the CDN_HOST variable, and the assets will still resolve correctly.

With the setup just described, you can still use the redirect URL alongside the cdn_url as needed. The following routes both work. The first produces the redirect URL, and the second produces the proxy URL.

<%= image_tag (@user.avatar)%> creates a redirect URL
<%= image_tag cdn_image_url(@user.avatar) %> creates a proxy URL

What if I want to proxy all my files?

If you want to proxy all your files, you can add an initializer to your application. Create an active_storage.rb file in config/initializers with the following:

Rails.application.config.active_storage.resolve_model_to_route = :rails_storage_proxy

You can then remove the cdn_routes created in the previous step, and all files will use the proxy URL. So in this case with one additional line in the configuration a standard <%= image_tag (@user.avatar), width: 500, height: 500 %> will produce a proxy URL.

What about the route helpers?

Another option is to use route helpers directly. With no active_storage.rb configuration and no cdn_image routes defined, you can use <%= image_tag rails_storage_proxy_path(@user.avatar), height: 100, width: 100 %> directly in your view to generate the proxy URL.

This helper accepts parameters, so you can specify your CDN host if desired:

rails_storage_proxy_url(@user.avatar, host: Rails.application.credentials.dig(:CDN_HOST), protocol: “https")

How do I connect my CDN to my application?

The architecture for the complete DNS and CDN setup for the application will look something like this:

How do I configure a CDN?

Select a CDN. For this article, we’ll use the Expedited CDN provided in the Heroku application store. We’ll also deploy the application with Heroku. If using Heroku, add your custom domain to your Heroku application. This is available on the Settings tab of your Heroku application.

Add the target to your DNS provider. After you add a custom domain with Heroku, Heroku will provide you a DNS record. Add this record to your domain's DNS configuration. Here’s an example of what that might look like with NameCheap as a DNS provider:

Complete the Setup of Expedited CDN or the CDN of your choice. Typically at this point, you will be prompted by your CDN provider to add additional DNS records to start using the CDN. Expedited CDN with Heroku will provide a set of prompts to configure the service. The first step is to select the Heroku domain you would like to use with the CDN. Follow the prompts to add additional DNS records.

Wait for the DNS to resolve. After the DNS has resolved, complete the CDN setup. Add the CDN_HOST as an environment variable on your production environment.

That's it! Once all the DNS changes have propagated, the setup is complete. The very first time a file is requested, the request will go through your Rails application, and subsequent requests will be served via the CDN.

Here at Simple File Upload, we've taken all of the pain out of using a CDN with Rails Active Storage. We provide a drop-in javascript widget to upload and serve files from a CDN for you. Try it free for 7 days!