Alberta general safety training course provider offering safety training courses for companies like Fortis Alberta, Ledcor, Grizzly Excavating, and more.

DETAC presented a unique challenge in integrating Alberta LMS rapidlms into their website. Initially, it seemed impossible, due to RapidLMS’ tight grip on page authoring and limited access to their database. But with some clever reverse-engineering, we helped the owner, John, to get exactly the appearance and functionality he wanted in his website.

Features

• Smooth scrolling using Tailwind CSS’s’s scroll-behavior: smooth; no need for any scripts!
• Scroll-based animations via tailwindcss-motion
• Locally-served fonts, meaning less requests (even HTTP/2 and HTTP/3!)
• Single-Page Application (no page refresh) using cutting-edge View Transitions API with fallback for older browsers
• Script-Free Cart Checkout, ensuring any customer can update and checkout their cart without JavaScript, using Netlify Serverless Functions, passing cart information with the shared cookie across subdomains
• Clean, semantic HTML, following WCAG 2.2 guidelines, ensuring adequate text contrast and screen reader support
• SEO Optimization using HTML Rich Snippets and schema.org markup
• Critical-Path CSS via Astro’s component island architecture and component <style> tags
• Lazy-loading images, only loading when you scroll to them
• Interactive, Server-Side Rendered Course Filtering, using Netlify Functions to fetch and filter courses, without using any JavaScript
• Responsive images using srcset and sizes, auatomaticaly generated and cached by Netlify’s Image Optimization. If RapidLMS ever went down or had an outage, the images still load
• Optimized Vector Graphics, using SVGO and SVG <symbol> tags for reuse any duplicated vectors like the logo for instance
• Mobile-responsive design, ensuring intuitive design on mobile, tablet, and desktop
• Lightning-fast delivery and load times from Netlify’s CDN
• Seamless redirects from old website URLs to new, semantic URLs using Netlify Redirects. This makes for optimal SEO and user experience if users go to an old page
• Custom 404 Not Found Page

Background

It seemed nearly impossible to integrate RapidLMS into DETAC’s website. RapidLMS, a paid, proprietary Learning Management System (LMS) basically had John locked in to using their system. However, we found a way to integrate RapidLMS into Astro’s static site, Netlify’s CDN, and Netlify Functions to fetch and filter courses, without using any JavaScript on the client. In fact, doing so would have been next to impossible because RapidLMS prevents cross-site requests via CSRF. So using clever trickery, faking browser requests within Netlify Functions, we managed to fake real browser requests to RapidLMS and get the course information.

The best part is: Astro caches all the data, so even if RapidLMS goes down or has an outage, the website will still load and display the courses.

Before

John had problems:

1. Inconsistent course filtering:The courses page didn’t actually show all the courses; the system RapidLMS provided only showed certain courses, and the filtering results differed between the search in the navigation and the search on the courses page.
2. Colour contrast issues: issues in legbility of text, due to RapidLMS’ incomplete page builder and lack of attention to accessibility.
3. SEO issues: John’s previous website didn’t list courses using the schema.org markup for courses, required for Google to index and display courses in search results.

What We Did

• Reverse-engineered the RapidLMS GraphQL API
• Cached and indexed all courses, along with their course information and images to separate Netlify pages
• Optimized for SEO using HTML Rich Snippets and schema.org markup
• Created a new course filtering system using Netlify Functions to fetch and filter courses, without using any JavaScript

GolfEzee is a comprehensive golf instruction booking platform that brings together live streaming, statistics, and community features.

Features

• Live golf instruction streaming
• Real-time statistics
• User profiles and social features
• Mobile-responsive design

PhD Beauty is a leading provider of hair care products and services, specializing in hair care for women and men.

Website Features

• Rock-solid semantic HTML, following WCAG 2.2 guidelines
• Cutting-edge page transitions powered by View Transitions API
• Optimized CSS using Tailwind CSS
• Even more optimized CSS via Critical-Path CSS via Astro’s component island architecture
• < 1 second load time using Netlify’s’s CDN
• Locally-hosted fonts, meaning less requests (even HTTP/2 and HTTP/3)

Background

Lauren Cleveland, owner of PhD Beauty, had built her own website using Wix. As a hair stylist and a business owner, she really wanted her brand to shine, to communicate everything.

Perspective clients would visit her website, having to scroll. Unfortunately, the classic Wix website builder doesn’t support any customization past what Wix provides (which is quite minimal).

She wanted a mobile-optimized website without all the cruft.

What We Did

Migrated to Custom Astro Site

We migrated her old website to Astro, basically static HTML, deployed to Netlify.

As we did this, we made sure to properly adhere to semantic HTML and WCAG 2.2 standards.

• No extra scripts
• No unnecessary CSS (Tailwind strips everything we don’t need)
• No plugins (WordPress, looking at you 😒)
• No frameworks

Just HTML.

Features

• CSS Mask advanced usage via <symbol> using astro-icon, rather than just gratuitously littering inline SVGs everywhere
• SVG advanced gradient in hero as opposed to a bitmap image that would have been pixelated on retina displays
• View Transitions throughout using astro view transitions
• Critical-Path CSS via Astro’s component island architecture and component <style> tags
• Completely javascript-free menu system with animations
• Responsive images using srcset and sizes
• Auto-generated and cached OpenGraph and X Cards for dynamic social media previews
• Unique usage of CSS grid to achieve layouts without code bloat
• (Super modern!) CSS-only scroll-driven animations via tailwindcss-motion

Prestige Medispa showcases a diverse array of over 60 unique skin-care products.

Features

• E-commerce
• Lazy-loading images
• Single-Page Application (no page refresh)
• Contact form

Stamina Health is a chiropractor and sports specialty therapy practice website.

Features

• Chiropractic services
• Sports specialty therapy
• Patient testimonials
• Contact form
• Google Maps integration