The official Scalewhale website! At Scalewhale, we believe growth marketing is best facilitated with technical expertise, automation, operations, and analytics.
For guides on cool hacks, visit our guides section here..
This project is proudly created using SvelteKit!. If you want to duplicate this repo to use as a starter for your portfolio/agency/blog site, here's some cool features:
We implemented sitemaps to automatically add in new posts from our CMS, making managing submissions easy!
Speed is important for SEO, but we don't want to lose some cool SvelteKit features by using the static adapter. Rather than serving the whole website as static, this repo chooses to prerender content by directory.
Hate Captcha? I do too. This repo uses a honeypot method to automatically blacklist spam, without giving an indication of an error to bots. In case there's a false positive, we warn the user with a toast message.
Sending form submissions to the CMS is great for record-keeping; but if you want to immediately be informed, no worries. We set it up so that all submissions get pushed to Slack so that you're alerted in real-time.
By using REM, smart breakpoints, % values, flex box, etc. -- we have a website that looks good on most device sizes!
We found an awesome repo called svelte-toast created by Jason Lee.
I wanted to make his project more responsive, so I copied the svelte-toast files into my component folder and configured it to work with another great repo called svelte-gestures by Tomas Rezac.
The result? Users can now effectively swipe away toast notifications on mobile. But, if you wanted different functionality (e.g. DoubleTap), it should work with that too!
I wanted to make sure I used as little JavaScript as possible to keep this lean. Even the hamburger menu is pure HTML/CSS!
Analytics for this project is implemented using Posthog, which gives me great data for marketing without sacrificing user privacy the way Google Analytics does.
I've also gone ahead and implemented support for Cloudflare Zaraz; a much more privacy focused and cleaner alternative to Google Tag Manager.
As a marketer, I'm grateful Svelte gave me a framework that made the process of coding my first website enjoyable. That said, I have a lot of room for optimization so here are things I'm actively working on:
While I feel like the website is relatively accessible, our current honeypot method doesn't include the aria-hidden tag which might make it detectable by screen reader. In a future update, we're going to try ways of injecting this with JavaScript to maintain it's bot-efficacy while improving screen-reading functionality.
I'm currently testing Cloudflare's Captcha solution to see it as an alternative.
I want to make some of my future guides interactive, without overly complicating the project. I plan on configuring CMS routing logic that will detect whether a post should be rendered statically or dynamically based on a field, and then place it in a subdirectory where prerender = false.
I should've used tailwind, I know, but I really wanted to learn CSS for this project - plus I love some of the QOL SCSS features. That being said, there's a metric ton of redundant CSS here - so plenty of room for me to optimize.
In a future update, I might introduce minification as well.
I want to make my blog easier to find, so I do plan on integrating those features relatively soon.
I know Typescript is the way to go, but I haven't learned it yet. Eventually I'll overhaul this project and have it written in TypeScript to bring it up to modern standards.
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.