I’ve been meaning to do this for a while now and though it’s not really a secret, it’s still exciting to announce. Along with a couple of very talented friends, I’ve started a new company! The collectively owned and operated company is called Open Prairie Technologies LLC and we specialize in creating web applications customized to suite clients’ needs.
Table of Contents
Company
While the company specializes in creating web apps, we’re certainly not limited to just that!
We do a little bit of everything. With a combined experience of over 45 years, we’ve seen it all (okay, maybe not all but a lot). We’ve worked in every imaginable sub-field of Information Technology (IT) including as system administrators, web developers, software engineers, and even PC repair technicians. That doesn’t even include all of the strange technology related hobbies we’ve picked up over the years. With a unified passion for tinkering, our team is determined to use the right tool for the right job. When it comes to programming or coding, there’s hardly a language we haven’t used.
I’ve wanted to work with this dream team for as long as I can remember. In fact, I have previously been employed alongside both of them at one point or another in my career. I won’t go into much detail about them here but you can read more about the other owner/operators on our website.
About the Website
Now I never went to business school but I’m pretty sure one of the requirements for a business that builds websites is that it; you know, has a website. And since I enjoy writing technical posts, let’s dive into some of the technical aspects of the website, shall we?
I knew I couldn’t just start building a site and hope whatever I built would be what we needed. I needed a plan. This site would have to be something that didn’t break the bank (all new startups run lean, right?), would look great, and would allow potential clients to contact us. With all of that in mind, I realized could quickly crank out a site with Svelte/SvelteKit and Tailwind CSS. To keep costs down and speeds up, I would render the entire site as static assets.
Forms
But if the entire site was simply static assets, how would I handle form submissions? Don’t those normally require a back-end server?
The original plan was to deploy this site to Cloudflare and use workers and the methods outlined in this blog post. However, I quickly learned that the techniques shown in the aforementioned blog post no longer work as the MailChannels integration no longer exists! At the time of this writing, there is a static forms plugin that will intercept form submissions but it doesn’t include a method for sending emails, which means I’d have to integrate with yet another 3rd party API. But all was not lost as I quickly learned about an even easier solution: Netlify Form Submissions.
Netlify detects the form element before deploying and manages the logic for handling the form submission for me. From there, I can get form submission alerts emailed directly to me by Netlify. So simple!
Glitch Effect
The structure of the website is not complicated. In fact, the whole site is just a single page (and an error template). But it does have some interesting things happening with the styles. For instance, the header text has this neat glitch effect I learned about from the brilliant Chris Coyier.
Of course, I had to convert Coyier’s CSS to Tailwind CSS but it was actually a fun way to learn how the effect worked.
And the logo does a fun thing where it gets smaller on scrolling! Check out the code for that:
Header.svelte
<script lang="ts">
import Nav from '$lib/components/nav/Nav.svelte';
import logo from '$lib/images/logo.png';
let y: number = 0;
</script>
<svelte:window bind:scrollY={y} />
<!-- Must be first element! -->
<div class="flex w-full items-stretch justify-between p-5">
<img
src={logo}
class="h-auto transition-all duration-200 {y > 50
? 'max-w-14 md:max-w-14'
: 'max-w-20 md:max-w-36'}"
alt="OPT Company Logo"
/>
<Nav />
</div>After importing the Navigation menu component and logo into this header component, I’ve declared a variable y to which I then bind to the Window scrollY property by using the <svelte:window> special element. Basically, as the page is scrolled vertically, y is updated. I can then use y to conditionally apply Tailwind styles to my logo image and adjust the size accordingly!
Note: As with many of the other Svelte special elements, <svelte:window> must be the first element within a component and can not be nested in another.
Hire Us!
I may be biased but if you’re looking for a team of nerds that are eager to take on a technical challenge and deliver results, then you need to contact OPT. We’re currently taking on new clients and are excited to work with you! Whether it’s creating custom web applications that streamline your organization’s procedures or consulting various methods to automate processes for your small business. We are a solutions oriented team capable of getting you the results you need. Contact us today!
