CINXE.COM
Blog | Tighten
<!DOCTYPE html> <html lang="en"> <head> <title>Blog | Tighten</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Tighten is a software development firm specializing in Laravel, Livewire, Vue.js, and React."> <meta property="og:title" content="Blog"> <meta property="og:description" content="Tighten is a software development firm specializing in Laravel, Livewire, Vue.js, and React."> <meta property="og:image" content="https://tighten.com/assets/images/tighten-com-og-cover.png"> <meta property="og:url" content="https://tighten.com/insights/"> <meta property="og:site_name" content="Tighten"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@TightenCo"> <meta name="twitter:image:alt" content="Tighten logo"> <link rel="canonical" href="https://tighten.com/insights/"> <link rel="alternate" type="application/atom+xml" title="RSS feed for the Tighten blog" href="/insights/feed.atom" /> <link rel="stylesheet" href="/assets/build/css/main.css?id=a7cef393b7fa86d773f1a91f607ad5ae"> <script defer src="/assets/build/js/main.js?id=aed12c440e96e82bf106f646bd3e1248"></script> <script src="https://outstanding-absorbing.tighten.com/script.js" data-site="QEKUSYAY" defer></script> <script src="https://cdn.amplitude.com/libs/analytics-browser-2.7.4-min.js.gz"></script><script src="https://cdn.amplitude.com/libs/plugin-autocapture-browser-0.9.0-min.js.gz"></script><script>window.amplitude.add(window.amplitudeAutocapturePlugin.plugin());window.amplitude.init('53312f8d59159cea4be6be8d86e93bde',{defaultTracking:true});</script> </script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body class="bg-black font-sans antialiased"> <div id="app" class="flex flex-col min-h-screen"> <header x-data="navManager()" class="sticky z-50 -top-1 md:-top-6" @scroll.window="scrollListener" @resize.debounce.100ms.window="handleResize" > <nav class="absolute visible w-full h-20 opacity-0 md:hidden bg-charcoal transition-all duration-500 -z-10" :class="{ 'opacity-0 h-20': !mobileNavOpen, 'opacity-100 h-[460px]': mobileNavOpen }" > <div class="h-full text-white transition-all duration-500 pb-7 -mt-80" :class="{'pt-0 -mt-80': !mobileNavOpen, 'pt-20 mt-0': mobileNavOpen }" > <div class="flex flex-col items-end justify-between h-full pr-8 transition-all duration-400" :class="{'opacity-0': !mobileNavOpen, 'opacity-100': mobileNavOpen }" > <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" id="servicesNavLink" href="/services/" text="Services" selected="" href="/services/" tabindex="0" aria-label="Services" > Services </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/results/" text="Results" selected="" href="/results/" tabindex="0" aria-label="Results" > Results </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/insights/" text="Blog" selected="selected" href="/insights/" tabindex="0" aria-label="Blog" > Blog </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/team/" text="Team" selected="" href="/team/" tabindex="0" aria-label="Team" > Team </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/about/" text="About" selected="" href="/about/" tabindex="0" aria-label="About" > About </a> <a class="flex items-center text-lg font-mono word-spacing-tight font-semibold uppercase tracking-widest border-y-4 border-transparent hover:border-b-yellow duration-300 hover:text-white mb-3" href="/newsletter/" text="Newsletter" selected="" href="/newsletter/" tabindex="0" aria-label="Newsletter" > Newsletter </a> <div class="py-6 scale-110"> <div class="flex"> <a x-data="button()" @click.prevent="handleClick" href="/contact/" class="bg-charcoal shadow-button-inner-gray border-white bg-origin-border hover:border-transparent hover:animate-button hover:shadow-button-none hover:text-black focus:border-transparent focus:animate-button focus:shadow-button-none focus:text-black focus:outline-none text-xs lg:text-sm xl:text-base leading-none bg-button-gradient font-mono font-bold tracking-wider rounded-full py-2 xl:py-2.5 md:text-center px-3 lg:px-4 xl:px-5 uppercase text-white border bg-[length:1000%_1000%] transition-all duration-500 active:bg-gradient-to-l active:border-transparent active:from-yellow active:to-yellow active:shadow-button-none active:text-black word-spacing-tight whitespace-nowrap" > Contact Us </a> </div> <script> function button() { return { handleClick(e) { e.target.classList.add( 'bg-gradient-to-l', 'from-yellow', 'to-yellow', 'shadow-button-none' ); e.target.classList.remove('bg-button-gradient'); setTimeout(() => { window.location.href = e.target.getAttribute('href'); }, 500); }, }; } </script> </div> </div> </div> </nav> <div class="relative w-full"> <div class="absolute -z-10 w-full max-w-full h-20 md:h-[76px] lg:h-[90px] md:p-6 transition-all duration-500" :class="{ 'md:p-6': !stickyNav, 'md:py-6 ': stickyNav }" > <div class="w-full h-20 md:h-[76px] lg:h-[90px] bg-charcoal"></div> </div> <nav class="h-20 md:h-[100px] lg:h-[114px] pt-0 md:pt-6 pl-5 pr-6 md:pl-10 md:pr-12 lg:px-12 text-white transition-all duration-500"> <div class="flex items-center justify-between h-full max-w-screen-2xl mx-auto"> <a href="/" title="Go to homepage" class="transition-none duration-0" role="presentation" :class="{ 'transition-none duration-0': isMobile, 'transition-all duration-500': !isMobile }" > <lottie-player aria-label="Tighten logo" class="w-[90px] xs:w-[115px] sm:w-[130px] xl:w-[186px]" id="logoPlayer" mode="normal" src="/assets/images/tighten-logo-inverted-rgb-final-clockwise.json" > </lottie-player> </a> <div class="items-center justify-end hidden h-full align-middle md:flex md:space-x-5 xl:space-x-7 2xl:space-x-8 ml-10" > <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/services/" aria-label="Services" > Services </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/results/" aria-label="Results" > Results </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white text-yellow border-b-yellow" href="/insights/" aria-label="Blog" > Blog </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/team/" aria-label="Team" > Team </a> <a class="text-xs sm:text-sm lg:text-md xl:text-base uppercase tracking-widest flex items-center h-full font-mono font-bold border-y-4 border-transparent hover:border-b-yellow duration-300 text-charcoal-20 hover:text-white " href="/about/" aria-label="About" > About </a> <div class="flex"> <a x-data="button()" @click.prevent="handleClick" href="/contact/" class="border-none animate-button text-black hover:shadow-button-none hover:text-white focus:border-white focus:shadow-button-none focus:text-white text-xs lg:text-sm xl:text-base leading-none bg-button-gradient font-mono font-bold tracking-wider rounded-full py-2 xl:py-2.5 md:text-center px-3 lg:px-4 xl:px-5 uppercase text-white border bg-[length:1000%_1000%] transition-all duration-500 active:bg-gradient-to-l active:border-transparent active:from-yellow active:to-yellow active:shadow-button-none active:text-black word-spacing-tight whitespace-nowrap" > Contact Us </a> </div> </div> <div class="block md:hidden" @click="handleNavToggleClick" @keydown.enter="handleNavToggleClick" @keyup.enter="focusOnMobileLink" tabindex="0" role="button" > <lottie-player class="w-8 h-8 fill-current" id="menuTogglePlayer" mode="normal" src="/assets/images/animated-hamburger.json" aria-label="Mobile menu" > </lottie-player> </div> </div> <div class="max-w-screen-2xl mx-auto"> <a class="absolute sr-only sm:focus:not-sr-only sm:focus:inline-flex items-center !p-3 !mt-2 !ml-4 font-mono word-spacing-tighter font-bold tracking-widest uppercase leading-none bg-charcoal text-yellow rounded-full" href="#content" tabindex="1"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="h-3 w-3 mx-3" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> <span class="pr-2">Skip to Main Content</span> </a> </div> </nav> </div> </header> <script> let logoPlayer; let menuTogglePlayer; let scrollThreshold = 25; let mobileViewport = 767; let isMobile = () => window.innerWidth <= mobileViewport; let shouldAnimate = () => !isMobile() && window.scrollY > scrollThreshold; document.querySelector('#logoPlayer').addEventListener('load', (e) => { logoPlayer = e.target; // Check if page is scrolled down and if so, animate the logo if (shouldAnimate()) { logoPlayer.play(); } }); document.querySelector('#menuTogglePlayer').addEventListener('load', (e) => { menuTogglePlayer = e.target; }); function navManager() { return { stickyNav: shouldAnimate(), mobileNavOpen: false, scrollListener() { if (isMobile()) { this.stickyNav = false; return; } this.animateLogo(); }, animate(player, direction) { if (!player) { // Animation hasn't been loaded yet return; } player.setDirection(direction); player.play(); }, animateLogo(direction) { if (shouldAnimate()) { this.stickyNav = true; this.animate(logoPlayer, 1); } else { this.stickyNav = false; this.animate(logoPlayer, -1); } }, seekLogo(player, toEnd = false) { if (!player) { // Animation hasn't been loaded yet return; } if (isMobile()) { if ( player.getLottie().isPaused && player.getLottie().currentFrame > 0 ) { player.pause(); this.animate(logoPlayer, -1); } } }, handleResize() { if (isMobile() && shouldAnimate()) { this.seekLogo(logoPlayer); } }, keyupListener(e) { this.mobileNavOpen = false; }, handleNavToggleClick(e) { let direction = this.mobileNavOpen ? -1 : 1; this.animate(menuTogglePlayer, direction); this.animate(logoPlayer, direction); this.mobileNavOpen = !this.mobileNavOpen; }, focusOnMobileLink() { document.querySelector('#servicesNavLink').focus(); }, }; } </script> <div class="px-6 md:px-16 lg:px-28 py-24 text-white bg-black md:py-32 lg:py-36 xl:py-40" id="content"> <div class="max-w-screen-2xl mx-auto flex flex-col justify-between xl:flex-row xl:items-end"> <h1 class="font-serif font-extralight text-6xl xs:text-8xl sm:text-10xl md:text-11xl lg:text-12xl xl:text-14xl 2xl:text-15xl mb-8" title="Blog"> Blog </h1> <div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 block xl:hidden py-0 -mt-16 sm:-mt-10 mb-8 sm:mb-16"> <div x-data="search" class="flex items-center justify-center w-full text-white"> <div x-ref="search" x-trap="query" class="z-10 relative flex flex-col items-center justify-center w-full sm:flex-row sm:items-end" @keyup.escape="reset" > <label class="hidden" for="search">Search</label> <input x-model.debounce="query" x-ref="searchbox" aria-autocomplete="none" aria-label="Search" aria-owns="search-results" autocomplete="off" spellcheck="off" class="w-full h-[50px] py-3 font-mono font-bold leading-none tracking-wide transition duration-300 ease-out bg-black border-charcoal-70 rounded-full px-14 text-base focus:border-charcoal-50 focus:transition-none focus:ring-0 word-spacing-tighter placeholder:text-black-50" id="search" name="search" placeholder="Search" role="combobox" type="text" :class="{ 'border-charcoal-50 rounded-b-none rounded-t-lg': hasResults || showNoResults }" :aria-expanded="hasResults || showNoResults" @blur="hasResults ? null : searching = false" @focus="showInput" @keyup.down="hasResults && $focus.within($refs.results).first()" > <span class="absolute top-0 left-0 flex items-center justify-center h-[50px] px-6 rounded-full focus:outline-none" :class="{ 'text-charcoal-30': !searching }" > <svg viewBox="0 0 20 20" fill="currentColor" stroke="none" class="w-4 h-4" aria-hidden="true" > <path d="m14.32 12.906 5.387 5.387a1 1 0 0 1-1.414 1.414l-5.387-5.387a8 8 0 1 1 1.414-1.414ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" fill-rule="nonzero" /> </svg> </span> <div x-show="hasResults || showNoResults" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-none" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute right-0 w-full text-left -translate-x-1/2 left-1/2 top-[50px]" > <div x-ref="results" class="flex flex-col overflow-scroll bg-black border border-t-0 rounded-b-lg border-charcoal-50 shadow-2xl-dark max-h-500 focus:outline-none" id="search-results" role="listbox" @keyup.down="focusSearchResult" @keyup.up="focusSearchResult" > <template x-for="(result, index) in results"> <a class="px-6 py-4 text-xl text-white bg-black border-b cursor-pointer border-charcoal-50 group" role="option" :class="{ 'rounded-b-lg border-b-0': (index === results.length - 1) }" :id="`search-result-${index}`" :href="result.document.link" @focus="(event) => setSearchAria(event, index)" @mousedown.prevent > <span x-html="result.document.title" class="font-serif font-light transition-colors group-hover:text-yellow group-focus:text-yellow" ></span> <span x-html="`${result.highlights[0].snippet}`" aria-hidden="true" class="block my-1 text-sm font-normal transition-colors text-charcoal-30 group-hover:text-charcoal-15 group-focus:text-charcoal-15" ></span> <span x-html="`${formatAuthor(result.document.author)}`" class="font-mono text-base font-semibold leading-tight tracking-tight capitalize transition-colors text-charcoal-30 word-spacing-tight group-hover:text-yellow group-focus:text-yellow" :aria-label="`written by ${formatAuthor(result.document.author)}`" ></span> </a> </template> <div x-show.important="showNoResults" class="flex items-center w-full h-[50px] px-6 bg-black border-b-0 border-charcoal-50 rounded-b-lg cursor-pointer shadow-2xl-dark" role="option" tabindex="-1" > <p class="my-0 text-sm">No results for <strong x-text="query"></strong></p> </div> </div> </div> </div> </div> <script src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script> <script> document.addEventListener('alpine:init', () => { Alpine.data('search', () => ({ matchCharLength: 3, searchUrl: 'https:\/\/vpcb1q8jzk9xlr0ep-1.a1.typesense.net', publicKey: 'zB8oNHQqokj24nMMBEbJuR9ALSpbpIGB', collection: 'tighten_dot_com.production.posts', query: '', response: { hits: [] }, searching: false, selectedResultIndex: null, get hasResults() { return this.results.length > 0 && (this.query.length >= this.matchCharLength); }, get showNoResults() { if (this.hasResults) { return false; } return this.query.length >= this.matchCharLength; }, get results() { if (!this.query) { return []; } return this.response.hits; }, init() { // blur search only when clicking outside document.addEventListener('click', (e) => { const search = this.$refs.search; const withinSearch = e.composedPath().includes(search); if(withinSearch) return; this.reset(); }); this.$watch('query', (value) => { if(!value){ return } axios({ url: `${this.searchUrl}/collections/${this.collection}/documents/search`, params: {q: value, query_by: 'title,content,author', exclude_fields: 'content', highlight_fields: 'title,content,author'}, headers: {'X-TYPESENSE-API-KEY': this.publicKey} }) .then( (response) => { this.response = response.data; }) .catch( (error) => { console.error(error); }); }); }, focusSearchResult(e) { const downArrowCode = 40; const upArrowCode = 38; const scopedFocus = this.$focus.within(this.$refs.results); if(!this.hasResults) return; switch(e.keyCode) { case downArrowCode: scopedFocus.next(); break; case upArrowCode: if(!scopedFocus.getPrevious()) { this.showInput(); return; } scopedFocus.previous(); break; } }, setSearchAria(e, index) { const result = e.target; const searchBox = this.$refs.searchbox; this.selectedResultIndex = index; // set aria on combobox and it's owned options this.resetSearchAria(); result.setAttribute('aria-selected', true); searchBox.setAttribute('aria-activedescendant', result.id); }, resetSearchAria() { const resultsList = document.querySelectorAll('#search-results a[role="option"]'); resultsList.forEach(element => element.setAttribute('aria-selected', false)); this.$refs.searchbox.setAttribute('aria-activedescendant', ''); }, reset() { this.query = ''; this.searching = false; this.resetSearchAria(); this.$nextTick(() => this.$refs.searchbox.blur()); }, showInput() { this.searching = true; this.resetSearchAria(); this.$nextTick(() => this.$refs.searchbox.focus()); }, formatAuthor(string) { return string.replace(/,(?=[^,]*$)/, ' &') }, })) }) </script> </div> <div class="px-6 md:px-16 lg:px-28 py-0"> <div class="max-w-screen-2xl mx-auto pb-4"> <div class="w-full py-8 lg:pt-0 lg:pb-20"> <a href="https://tighten.com/insights/10-efficient-and-fun-ways-to-seed-your-database/" aria-label="10 Efficient (and Fun) Ways to Seed Your Database" class="group flex flex-col items-start justify-start lg:flex-row xl:items-end lg:space-x-6" > <div class="flex-shrink-0 w-full sm:w-auto"> <div class="relative block w-full aspect-w-1 aspect-h-1 h-72 sm:w-72 sm:h-72 lg:mb-2 md:w-80 md:h-80 lg:w-[352px] lg:h-[352px] mt-2.5 xl:mt-0" > <div class="w-full h-full bg-center bg-cover lazyload md:bg-contain" data-bg="https://tighten.com/assets/images/insights/10-efficient-and-fun-ways-to-seed-your-database-preview.jpg" role="img" aria-label="Blog post preview image" style=" " > <div class="absolute bottom-0 left-0 p-6 lg:bottom-auto lg:top-0"> <div class="inline-block bg-yellow font-sans text-black uppercase tracking-widest py-1.5 px-3 text-xs font-bold shadow"> New </div> </div> </div> </div> </div> <div class="pt-6 pl-0 sm:pt-12 lg:pt-0 lg:pl-6"> <div class="font-serif text-4xl transition-colors duration-300 font-extralight leding-tight-4 md:text-5xl md:leading-tight-4 2xl:text-6xl 2xl:leading-tight-4 text-charcoal-10 group-hover:text-yellow"> 10 Efficient (and Fun) Ways to Seed Your Database </div> <div class="text-lg my-5 text-charcoal-40 group-hover:text-charcoal-20 transition-colors duration-300"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2025-03-10">3 days ago</time></span> 路 Nico Devs </span> </div> <div class="text-base leading-relaxed transition-colors duration-300 text-charcoal-30 group-hover:text-charcoal-15 md:text-lg md:leading-relaxed xl:text-xl xl:leading-relaxed" > Seeders allow us to quickly fill our database with records to test our application. Let's say that you need a couple of users to test your authentication system鈥攜ou could create them manually using your app's register page or... </div> </div> </a> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 bg-charcoal-85 pt-10 md:pt-16 lg:pt-24 xl:py-24"> <div class="max-w-screen-2xl mx-auto flex flex-col xl:flex-row items-start"> <div class="flex-none w-full xl:w-3/4 xl:pr-12"> <div class="flex flex-col space-y-6 sm:space-y-10 xl:space-y-16"> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/five-practical-tips-to-improve-search-in-laravel-apps-with-typesense/" aria-label="Five Practical Tips to Improve Search in Laravel Apps With Typesense" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/five-practical-tips-to-improve-search-in-laravel-apps-with-typesense-preview.jpg" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/five-practical-tips-to-improve-search-in-laravel-apps-with-typesense/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> Article </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> Five Practical Tips to Improve Search in Laravel Apps With Typesense </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2025-02-12">Feb 12</time></span> 路 Nico Devs </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> Typesense is making waves in the search landscape. Since its inclusion as an officially supported driver for Laravel Scout, Typesense has quickly become a... </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/rich-text-laravel/" aria-label="Introducing Rich Text Laravel" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/rich-text-laravel-preview.jpeg" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/rich-text-laravel/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> Article </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> Introducing Rich Text Laravel </div> <h2 class="text-base leading-snug md:text-lg md:leading-snug text-charcoal-80 transition-colors duration-300 pt-1"> A package to integrate Trix into Laravel applications </h2> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2025-01-27">Jan 27</time></span> 路 Tony Messias </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> When we build forms for an application, it's common to need a field where a plain textarea isn't enough. So how do we proceed? We could process it on the backend and treat the input as Markdown, but this requires manual configuration and can often be... </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/bol-ep14-david-watson-riskadvisor/" aria-label="From Zero Code to SaaS Success | David Watson, Founder of RiskAdvisor" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/bol-logo-preview.png" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/bol-ep14-david-watson-riskadvisor/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> podcast </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> From Zero Code to SaaS Success | David Watson, Founder of RiskAdvisor </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2025-01-21">Jan 21</time></span> 路 Matt Stauffer </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> In this episode of The Business of Laravel podcast, Matt Stauffer interviews David Watson, founder of... </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/filament-crash-course-create-a-customizable-admin-panel-in-minutes/" aria-label="Filament Crash-Course: Create a Customizable Admin Panel in Minutes" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/filament-crash-course-create-a-customizable-admin-panel-in-minutes-preview.jpg" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/filament-crash-course-create-a-customizable-admin-panel-in-minutes/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> Article </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> Filament Crash-Course: Create a Customizable Admin Panel in Minutes </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2025-01-08">Jan 8</time></span> 路 Nico Devs </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> In most applications, administrators need a way to manage data. Whether it's a blog's articles and comments, a store's products and orders, or a theater's events and tickets, admins need a place to list, create, edit, and remove records. And... </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/bol-ep13-gilbert-pellegrom-lemon-squeezy/" aria-label="Bootstrap Mindset, Big Results | Gilbert Pellegrom, Co-founder of Lemon Squeezy" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/bol-logo-preview.png" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/bol-ep13-gilbert-pellegrom-lemon-squeezy/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> podcast </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> Bootstrap Mindset, Big Results | Gilbert Pellegrom, Co-founder of Lemon Squeezy </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2024-12-31">Dec 31, 2024</time></span> 路 Matt Stauffer </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> In this episode of The Business of Laravel podcast, Matt Stauffer interviews Gilbert Pellegrom, Engineering Manager at Stripe and former Co-founder/CTO of Lemon Squeezy. Gilbert shares his journey from self-taught developer to entrepreneur, building Lemon Squeezy to simplify selling digital goods online. </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/takeout-docker-installation/" aria-label="New: Install Takeout with Docker" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/takeout-on-docker-preview.jpeg" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/takeout-docker-installation/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> Article </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> New: Install Takeout with Docker </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2024-12-16">Dec 16, 2024</time></span> 路 Tony Messias </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> Takeout is a convenient layer on top of Docker that lets you quickly spin up services without looking up the images and how to run them. Need a Redis service locally? Run:... </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/bol-ep12-alex-millar-govai/" aria-label="Faithful in Small Things, Ready for Big Opportunities | Alex Millar, CTO & Founder of GovAI" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/bol-logo-preview.png" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/bol-ep12-alex-millar-govai/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> podcast </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> Faithful in Small Things, Ready for Big Opportunities | Alex Millar, CTO & Founder of GovAI </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2024-12-10">Dec 10, 2024</time></span> 路 Matt Stauffer </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> In this episode of the聽Business of Laravel聽podcast, Matt Stauffer talks with Alex Millar, CTO and founder of GovAI, about... </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/bol-ep11-jason-johnson-sweetwater/" aria-label="The Power of Intentional Leadership | Jason Johnson, CIO at Sweetwater" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/bol-logo-preview.png" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/bol-ep11-jason-johnson-sweetwater/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> podcast </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> The Power of Intentional Leadership | Jason Johnson, CIO at Sweetwater </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2024-10-15">Oct 15, 2024</time></span> 路 Matt Stauffer </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> In this episode of the聽Business of Laravel聽podcast, Matt Stauffer sits down with Jason Johnson, Chief Information Officer at... </span> </a> </div> </div> <div class="w-full"> <div class="flex flex-col sm:flex-row items-stretch bg-cream-200 hover:bg-white border-2 border-charcoal-85 hover:border-yellow hover:shadow-2xl-dark hover:scale-grow transition-all duration-300"> <div class="flex-shrink-0 h-48 sm:h-auto sm:min-h-64 sm:w-64 md:min-h-72 md:w-72 relative"> <a href="https://tighten.com/insights/bol-ep10-jason-mccreary-shift/" aria-label="Scaling and Handling Finances as a Solo Founder | Jason McCreary, Founder of Shift" > <div class="w-full h-full bg-center bg-cover lazyload" data-bg="https://tighten.com/assets/images/insights/bol-logo-preview.png" role="img" aria-label="Blog post preview image" style=" " ></div> </a> </div> <a class="px-8 py-6 lg:px-10 lg:py-8" href="https://tighten.com/insights/bol-ep10-jason-mccreary-shift/"> <div class="font-mono font-bold text-sm uppercase tracking-wide text-yellow-600 pb-2"> podcast </div> <div class="font-serif text-2xl leading-tight-4 md:text-3xl md:leading-tight-4 2xl:text-4xl 2xl:leading-tight-4 text-black transition-colors duration-300"> Scaling and Handling Finances as a Solo Founder | Jason McCreary, Founder of Shift </div> <div class="my-3 lg:my-5 text-charcoal-60 text-md"> <span class="font-mono font-semibold leading-tight tracking-tight word-spacing-tightest"> <span><time datetime="2024-10-01">Oct 1, 2024</time></span> 路 Matt Stauffer </span> </div> <span class="text-charcoal-85 text-sm lg:text-base line-clamp-3"> In this episode of the Business of Laravel podcast, Matt Stauffer interviews Jason McCreary, the founder of Shift. They discuss... </span> </a> </div> </div> <div class="flex mx-auto space-x-3 sm:space-x-5"> <button class="bg-charcoal-90 text-charcoal-70 border-charcoal-70 border rounded-full p-2.5 cursor-default" aria-label="Disabled Previous Button" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5" role="img" aria-label="Disabled Previous Button" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" /> </svg> </button> <a href="/insights/2/" class="bg-charcoal-90 text-charcoal-20 border-charcoal-20 hover:bg-yellow hover:text-black border hover:border-yellow transition-colors rounded-full p-2.5" aria-label="Next" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5" role="img" aria-label="Next" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /> </svg> </a> </div> </div> </div> <div class="flex-none w-full xl:w-1/4 xl:top-[145px] xl:sticky"> <div class="bg-black xl:bg-transparent py-16 xl:py-0 xl:-mt-2 -mx-6 px-6 md:-mx-16 md:px-16 lg:-mx-28 lg:px-28 xl:mx-0 xl:px-0 mt-16 xl:mt-0"> <div class="font-serif font-extralight xl:font-normal text-2xl sm:text-3xl xl:text-xl text-charcoal-10 leading-snug pb-5"> Get our latest insights <br class="hidden xl:block">in your inbox: </div> <div class="max-w-md" id="insights-form"> <div id="mc_embed_shell" class="prose"> <div id="mc_embed_signup"> <form action="https://tighten.us21.list-manage.com/subscribe/post?u=d0868978f83481d3d11eae9b8&id=688fab531a&f_id=00a2ebe6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" > <div id="mc_embed_signup_scroll"> <div class="grid grid-cols-1 gap-3"> <div class="mc-field-group"> <label for="mce-FNAME" class="!sr-only">First Name </label> <input class="w-full focus-within:text-yellow bg-transparent block border-t-0 border-x-0 focus:border-b-yellow focus:outline-none focus:ring-transparent font-serif font-light px-0 rounded-none selection:bg-charcoal-70 text-lg border-b-charcoal-30 light:focus:text-charcoal-80 focus:text-charcoal-20 light:text-charcoal-60 text-charcoal-20 text" type="text" name="FNAME" placeholder="First name" id="mce-FNAME" value="" /> </div> <div class="mc-field-group"> <label for="mce-EMAIL" class="!sr-only">Email Address </label> <input class="w-full focus-within:text-yellow bg-transparent block border-t-0 border-x-0 focus:border-b-yellow focus:outline-none focus:ring-transparent font-serif font-light px-0 rounded-none selection:bg-charcoal-70 text-lg border-b-charcoal-30 light:focus:text-charcoal-80 focus:text-charcoal-20 light:text-charcoal-60 text-charcoal-20 required email" type="email" name="EMAIL" id="mce-EMAIL" placeholder="Email" required="" value="" /> </div> </div> <p class="mt-6 !text-charcoal-60 !text-xs !leading-snug !tracking-normal">By submitting this form, you acknowledge our <a href="https://tighten.com/privacy-policy/" target="_blank" rel="noopener" class="underline decoration-charcoal-60 decoration-1 underline-offset-4 hover:text-yellow hover:decoration-yellow">Privacy Notice</a>.</p> <div> <input type="hidden" name="tags" value="2968885" /> </div> <div id="mce-responses" class="clear mt-6 light:text-charcoal-60 text-charcoal-20"> <div class="response border border-red p-4" id="mce-error-response" style="display: none;" ></div> <div class="response border border-yellow p-4" id="mce-success-response" style="display: none;" ></div> </div> <div aria-hidden="true" style="position: absolute; left: -5000px;"> <input type="text" name="b_d0868978f83481d3d11eae9b8_688fab531a" tabindex="-1" value="" /> </div> <div class="mt-6"> <button id="mc-embedded-subscribe" type="submit" class="!bg-yellow !font-bold !rounded-full !text-black appearance-none box-border cursor-pointer duration-300 font-mono leading-none px-8 py-3 text-sm tracking-widest transition-colors uppercase word-spacing-tight !no-underline inline-block md:text-base hover:!bg-black hover:!text-yellow" > Subscribe </button> </div> </div> </form> </div> </div> <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script> <script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script> </div> </div> <div class="hidden xl:block pt-12"> <div x-data="search" class="flex items-center justify-center w-full text-white"> <div x-ref="search" x-trap="query" class="z-10 relative flex flex-col items-center justify-center w-full sm:flex-row sm:items-end" @keyup.escape="reset" > <label class="hidden" for="search">Search</label> <input x-model.debounce="query" x-ref="searchbox" aria-autocomplete="none" aria-label="Search" aria-owns="search-results" autocomplete="off" spellcheck="off" class="w-full h-[50px] py-3 font-mono font-bold leading-none tracking-wide transition duration-300 ease-out bg-black border-charcoal-70 rounded-full px-14 text-base focus:border-charcoal-50 focus:transition-none focus:ring-0 word-spacing-tighter placeholder:text-black-50" id="search" name="search" placeholder="Search" role="combobox" type="text" :class="{ 'border-charcoal-50 rounded-b-none rounded-t-lg': hasResults || showNoResults }" :aria-expanded="hasResults || showNoResults" @blur="hasResults ? null : searching = false" @focus="showInput" @keyup.down="hasResults && $focus.within($refs.results).first()" > <span class="absolute top-0 left-0 flex items-center justify-center h-[50px] px-6 rounded-full focus:outline-none" :class="{ 'text-charcoal-30': !searching }" > <svg viewBox="0 0 20 20" fill="currentColor" stroke="none" class="w-4 h-4" aria-hidden="true" > <path d="m14.32 12.906 5.387 5.387a1 1 0 0 1-1.414 1.414l-5.387-5.387a8 8 0 1 1 1.414-1.414ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" fill-rule="nonzero" /> </svg> </span> <div x-show="hasResults || showNoResults" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-none" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute right-0 w-full text-left -translate-x-1/2 left-1/2 top-[50px]" > <div x-ref="results" class="flex flex-col overflow-scroll bg-black border border-t-0 rounded-b-lg border-charcoal-50 shadow-2xl-dark max-h-500 focus:outline-none" id="search-results" role="listbox" @keyup.down="focusSearchResult" @keyup.up="focusSearchResult" > <template x-for="(result, index) in results"> <a class="px-6 py-4 text-xl text-white bg-black border-b cursor-pointer border-charcoal-50 group" role="option" :class="{ 'rounded-b-lg border-b-0': (index === results.length - 1) }" :id="`search-result-${index}`" :href="result.document.link" @focus="(event) => setSearchAria(event, index)" @mousedown.prevent > <span x-html="result.document.title" class="font-serif font-light transition-colors group-hover:text-yellow group-focus:text-yellow" ></span> <span x-html="`${result.highlights[0].snippet}`" aria-hidden="true" class="block my-1 text-sm font-normal transition-colors text-charcoal-30 group-hover:text-charcoal-15 group-focus:text-charcoal-15" ></span> <span x-html="`${formatAuthor(result.document.author)}`" class="font-mono text-base font-semibold leading-tight tracking-tight capitalize transition-colors text-charcoal-30 word-spacing-tight group-hover:text-yellow group-focus:text-yellow" :aria-label="`written by ${formatAuthor(result.document.author)}`" ></span> </a> </template> <div x-show.important="showNoResults" class="flex items-center w-full h-[50px] px-6 bg-black border-b-0 border-charcoal-50 rounded-b-lg cursor-pointer shadow-2xl-dark" role="option" tabindex="-1" > <p class="my-0 text-sm">No results for <strong x-text="query"></strong></p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="bg-cream-400"> <div class="px-6 md:px-16 lg:px-28 py-10 md:py-16 lg:py-24"> <div class="max-w-screen-2xl mx-auto flex flex-col xl:flex-row"> <div class="flex-1"> <div class="font-serif font-extralight text-charcoal-80 text-6xl lg:text-7xl xl:text-8xl pb-10"> Hey, <br class="hidden lg:block">let鈥檚 talk. </div> </div> <div class="flex-1 light"> <div x-data="contactForm()" class="py-0 mb-24 text-charcoal-80"> <div class="max-w-5xl mx-auto"> <form action="https://fieldgoal.io/f/AGz9ZcOcd0nXSBLM38wsGiiTkLhuaUxZ" method="POST" x-show="! submitted" @recaptcha-submitted.window="submitForm" > <div class="mb-20 grid grid-cols-2 gap-y-10 sm:gap-y-6 gap-x-10 sm:mb-12"> <div class="relative col-span-2 lg:col-span-1 text-charcoal-80 focus-within:text-black"> <label for="first_name" class="flex items-center justify-between absolute left-0 -bottom-8 sm:bottom-0 pb-2.5 block text-sm sm:text-lg font-serif" :class="hasError('first_name') ? 'w-full' : ''" > First name <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('first_name')" x-text="errors.first_name ?? 'Required'" x-cloak > Required </span> </label> <input id="first_name" class="block w-full py-1 pl-0 pr-0 mt-1 font-mono text-lg tracking-tight text-black bg-transparent border-t-0 rounded-none word-spacing-tighter border-x-0 border-b-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-b-yellow md:text-2xl selection:bg-charcoal-80 sm:pl-32 lg:pl-36 sm:py-2" :class="hasError('first_name') ? 'border-b-red focus:border-b-yellow' : 'border-b-charcoal-60 focus:border-b-yellow'" type="text" name="first_name" autocomplete="given-name" autocorrect="off" autocapitalize="sentences" spellcheck="false" x-model="form.first_name" @input="checkError('first_name')" @keyup.enter="submitForm" /> </div> <div class="relative col-span-2 lg:col-span-1 text-charcoal-80 focus-within:text-black"> <input id="url" class="absolute -mx-[86127px] font-mono word-spacing-tighter tracking-tight border-t-0 border-x-0 border-b-charcoal-60 mt-1 focus:outline-none focus:ring-transparent text-black focus:text-black focus:border-b-yellow block w-full text-lg md:text-2xl rounded-none bg-transparent selection:bg-charcoal-80 pl-0 sm:pl-32 lg:pl-36 pr-0 py-1 sm:py-2" type="text" name="url" tabindex="-1" autocomplete="off" aria-hidden="true" x-model="form.url" /> <label for="last_name" class="flex items-center justify-between absolute left-0 -bottom-8 sm:bottom-0 pb-2.5 block text-sm sm:text-lg font-serif" :class="hasError('last_name') ? 'w-full' : ''" > Last name <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('last_name')" x-text="errors.last_name ?? 'Required'" x-cloak > Required </span> </label> <input id="last_name" class="block w-full py-1 pl-0 pr-0 mt-1 font-mono text-lg tracking-tight text-black bg-transparent border-t-0 rounded-none word-spacing-tighter border-x-0 border-b-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-b-yellow md:text-2xl selection:bg-charcoal-80 sm:pl-32 lg:pl-36 sm:py-2" type="text" name="last_name" autocomplete="family-name" autocorrect="off" autocapitalize="sentences" spellcheck="false" x-model="form.last_name" @input="checkError('last_name')" @keyup.enter="submitForm" /> </div> <div class="relative col-span-2 text-charcoal-80 focus-within:text-black"> <label for="email" class="flex items-center justify-between absolute left-0 -bottom-8 sm:bottom-0 pb-2.5 block text-sm sm:text-lg font-serif" :class="hasError('email') ? 'w-full' : ''" > Email <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('email')" x-text="errors.email ?? 'Required'" x-cloak > Required </span> </label> <input id="email" class="block w-full py-1 pl-0 pr-0 mt-1 font-mono text-lg tracking-tight text-black bg-transparent border-t-0 rounded-none word-spacing-tighter border-x-0 border-b-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-b-yellow md:text-2xl selection:bg-charcoal-80 sm:pl-32 lg:pl-20 sm:py-2" type="email" name="email" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false" x-model="form.email" @input="checkError('email')" @keyup.enter="submitForm" /> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-80 focus-within:text-black"> <label for="message" class="flex items-center justify-between w-full font-serif text-sm sm:text-lg" > Tell us about your idea: <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('message')" x-text="errors.message ?? 'Required'" x-cloak > Required </span> </label> <textarea id="message" class="block w-full px-4 py-3 mt-3 font-mono tracking-tight text-black bg-transparent rounded-none word-spacing-tighter border-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-yellow md:text-lg lg:text-xl selection:bg-charcoal-80" rows="5" name="message" autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="false" x-model="form.message" @input="checkError('message')" ></textarea> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-80 focus-within:text-black"> <label for="how_did_you_hear_about_us" class="flex items-center justify-between w-full font-serif text-sm sm:text-lg" > How did you hear about us? <span class="font-mono tracking-tight normal-case select-none text-red" x-show="hasError('how_did_you_hear_about_us')" x-text="errors.how_did_you_hear_about_us ?? 'Required'" x-cloak > Required </span> </label> <select id="how_did_you_hear_about_us" x-model="form.how_did_you_hear_about_us" @input="checkError('how_did_you_hear_about_us')" name="how_did_you_hear_about_us" class="md:text-lg lg:text-xl font-mono tracking-tight text-black word-spacing-tighter block px-4 py-3 mt-3 bg-transparent w-full md:w-1/2 border-charcoal-60 focus:outline-none focus:ring-transparent focus:text-black focus:border-yellow" > <option hidden selected></option> <option value="laravel_community">Laravel community</option> <option value="laravel_partners">Laravel Partners</option> <option value="vuejs_partners">Vue.js Partners</option> <option value="google">Google</option> <option value="twitter">Twitter</option> <option value="linkedin">LinkedIn</option> <option value="word_of_mouth">Word of mouth</option> <option value="conference_or_event">Conference or event</option> <option value="referral">Referral</option> <option value="other">Other / not sure</option> </select> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-80 flex items-start items-center"> <label class="flex items-center cursor-pointer"> <input id="subscribe_to_newsletter" x-model="form.subscribe_to_newsletter" @input="checkError('subscribe_to_newsletter')" name="subscribe_to_newsletter" type="checkbox" class="cursor-pointer object-left align-middle h-8 w-8 text-yellow bg-transparent border-charcoal-60 focus:outline-none focus:ring-transparent hover:border-yellow focus:border-yellow checked:bg-yellow checked:border-yellow" /> <span class="object-left align-middle mx-4 font-serif text-sm sm:text-lg leading-tight text-wrap whitespace-normal">Sign me up to receive occasional email insights from Tighten</span> </label> </div> </div> <div class="flex mb-12 space-x-10"> <div class="relative w-full text-charcoal-40 text-xs"> <p>By submitting this form, you acknowledge our <a href="/privacy-policy" class="underline hover:text-yellow">Privacy Notice</a>.</p> <p> This site is protected by reCAPTCHA and the Google <a class="underline hover:text-yellow" href="https://policies.google.com/privacy">Privacy Policy</a> and <a class="underline hover:text-yellow" href="https://policies.google.com/terms">Terms of Service</a> apply. </p> </div> </div> <div class="flex justify-end w-full mt-10 mb-6"> <div class="flex"> <a class="rounded-full appearance-none cursor-pointer" aria-label="Submit" type="submit" @click.prevent.debounce="$refs.recaptchaTrigger.click()" @keyup.enter="$refs.recaptchaTrigger.click()" tabindex="0" x-bind:disabled="submitting"> <div class="text-sm md:text-base box-border transition-colors duration-300 font-mono word-spacing-tight font-bold tracking-widest rounded-full py-3 px-6 uppercase leading-none bg-yellow hover:bg-white text-black" > <span class="px-4">Send Message</span> </div> </a> </div> <input class="hidden g-recaptcha" type="submit" x-ref="recaptchaTrigger" data-sitekey="6LfHrMwpAAAAAHeFTMbG1xf52XD8Gx6gQG2RX15o" data-callback="onSubmit" /> </div> </form> <div x-show="submitted" x-cloak> <div class="py-12 font-serif text-center font-extralight"> <h1 class="mb-10 text-5xl sm:text-6xl text-yellow">Thank you!</h1> <p class="font-mono text-xl sm:text-2xl"> We appreciate your interest. <br class="hidden sm:block xl:hidden">We will get right back to you. </p> </div> </div> </div> <div x-show="! submitted" class="flex justify-start w-full -mb-3 -ml-2 sm:-ml-3"> <a href="https://fieldgoal.io/" class="flex items-center justify-center text-sm text-gray hover:text-yellow transition-colors"> <svg viewBox="0 0 27 28" fill="none" stroke="none" class="w-4 h-4 mr-2 sm:h-5 sm:w-5" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H24C25.3807 0.5 26.5 1.61929 26.5 3V5C26.5 6.38071 25.3807 7.5 24 7.5H3C1.61929 7.5 0.5 6.38071 0.5 5V3ZM3 1.5C2.17157 1.5 1.5 2.17157 1.5 3V5C1.5 5.82843 2.17157 6.5 3 6.5H24C24.8284 6.5 25.5 5.82843 25.5 5V3C25.5 2.17157 24.8284 1.5 24 1.5H3ZM0.5 13C0.5 11.6193 1.61929 10.5 3 10.5H17C18.3807 10.5 19.5 11.6193 19.5 13V15C19.5 16.3807 18.3807 17.5 17 17.5H3C1.61929 17.5 0.5 16.3807 0.5 15V13ZM3 11.5C2.17157 11.5 1.5 12.1716 1.5 13V15C1.5 15.8284 2.17157 16.5 3 16.5H17C17.8284 16.5 18.5 15.8284 18.5 15V13C18.5 12.1716 17.8284 11.5 17 11.5H3ZM3 20.5C1.61929 20.5 0.5 21.6193 0.5 23V25C0.5 26.3807 1.61929 27.5 3 27.5H8C9.38071 27.5 10.5 26.3807 10.5 25V23C10.5 21.6193 9.38071 20.5 8 20.5H3ZM1.5 23C1.5 22.1716 2.17157 21.5 3 21.5H8C8.82843 21.5 9.5 22.1716 9.5 23V25C9.5 25.8284 8.82843 26.5 8 26.5H3C2.17157 26.5 1.5 25.8284 1.5 25V23Z" /> </svg> Form by FieldGoal </a> </div> </div> <script> window.onSubmit = function (token) { window.dispatchEvent(new CustomEvent('recaptcha-submitted', { detail: token })); }; let contact_form_url = "https://fieldgoal.io/f/AGz9ZcOcd0nXSBLM38wsGiiTkLhuaUxZ"; document.addEventListener('alpine:init', () => { Alpine.data('contactForm', () => ({ form: { first_name: null, last_name: null, email: null, message: null, how_did_you_hear_about_us: null, subscribe_to_newsletter: null, url: null, 'g-recaptcha-response': null, }, errors: {}, submitting: false, submitted: false, hasError(field) { return this.errors.hasOwnProperty(field) && this.errors[field]; }, isSubmitted() { return this.submitted; }, formIsValid() { this.errors = {}; Object.keys(this.form) .filter(field => ['first_name', 'last_name', 'email', 'message'].includes(field)) .forEach(input => { this.validateInput(input); }); return Object.keys(this.errors).length == 0; }, validateInput(key) { if (! this.form[key]) { this.errors[key] = 'Required'; } else if (key === 'email' && !this.hasValidEmail()) { this.errors[key] = 'Email address invalid'; } else { // All validations passed, so remove key from error bag delete this.errors[key]; } return this.errors.hasOwnProperty(key); }, hasValidEmail() { if (!this.form.email || this.form.email.length === 0) { return true; } var email_regex = new RegExp( /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ); return email_regex.test(this.form.email); }, checkError(key) { if (this.errors.hasOwnProperty(key)) { // Only re-validate if it had an error already this.validateInput(key); } }, submitForm(event) { this.submitting = true; if (this.formIsValid()) { if (window.fathom) { window.fathom.trackGoal("8XHPBZYD", 0); } this.form['g-recaptcha-response'] = event.detail; axios({ method: 'post', headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest', }, url: contact_form_url, data: this.form, }).then(response => { this.submitted = true; this.submitting = false; }).catch(error => { this.submitted = true; this.submitting = false; if (error.response && error.response.data && error.response.data.errors) { this.errors = error.response.data.errors; } }); } grecaptcha.reset(); this.submitting = false; }, init() { window.addEventListener('load', (event) => { window.fathom.trackGoal("FB8Q5F8B", 0); }); }, })) }) </script> </div> </div> </div> </div> <div class="px-6 md:px-16 lg:px-28 py-10 md:py-16 lg:py-24 p-6 pt-24 text-white bg-black sm:p-12 md:p-0"> <div class="max-w-screen-2xl mx-auto flex flex-wrap w-full space-y-10 lg:space-y-0"> <div class="flex flex-col items-start w-full h-full space-y-2 lg:w-2/5 "> <div class="flex items-end justify-between w-full pb-4 md:pb-8"> <div class="w-64 lg:-mt-4 mr-8 lg:ml-[-38px]"> <svg id="tighten-logo-inverted" viewBox="0 0 864 188.9234" aria-hidden="true" > <g> <g id="type"> <path d="M193.71,67.6651v83.4585H174.2486V67.6651l-5.6137-5.6145H134.2037V44.4615h99.5511V62.0506H199.3237Z" style="fill: #fff"/> <path d="M306.8128,135.4044h25.8237v15.7192H248.8038V135.4044h31.4374l4.8652-4.8643V92.3659L280.2412,87.5H248.8038V71.7825h53.1438V130.54Z" style="fill: #fff"/> <path d="M412.6319,143.8263c-4.6788,5.0515-14.2219,9.9174-25.6366,9.9174-23.9522,0-40.9806-18.7136-40.9806-42.2915s17.0284-42.29,40.9806-42.29c11.4147,0,20.9578,4.8644,25.6366,9.9175h4.4909V71.97H436.21v74.4752c0,26.0109-21.7072,42.4786-47.9044,42.4786-18.7128,0-33.4962-5.9888-42.8521-16.0934l11.4146-13.4733c7.4853,8.0475,20.0228,13.2861,31.4375,13.2861,18.1513,0,28.8174-9.73,28.8174-25.2623v-3.5542ZM417.4971,119.5V103.4063C410.76,93.8632,401.9651,86.19,389.6147,86.19c-14.7826,0-23.9523,11.04-23.9523,25.2623s9.17,25.2623,23.9523,25.2623C401.9651,136.7145,410.76,129.0429,417.4971,119.5Z" style="fill: #fff"/> <path d="M482.3348,151.1236H463.2477V36.4156h19.0871V80.7641h4.4908a34.1458,34.1458,0,0,1,25.6366-11.6018c18.7128,0,32.1853,11.4147,32.1853,32.56v49.4017H525.5612V105.8393c0-11.04-3.5559-19.2751-15.9063-19.2751-11.2275,0-20.022,10.1062-27.32,21.3337Z" style="fill: #fff"/> <path d="M577.4013,87.8743H558.6886V71.7825h23.3907V44.4615h19.2742v27.321H640.65V87.8743H605.8444l-4.678,4.6788V114.26c0,13.66,5.0523,22.2678,18.1505,22.2678,11.6026,0,18.3385-6.1744,26.3852-16.84l11.4146,13.099c-9.1688,12.91-23.0164,20.9578-37.9861,20.9578-21.7072,0-37.0513-11.2275-37.0513-36.8641V92.5531Z" style="fill: #fff"/> <path d="M717.193,153.7437c-28.2559,0-47.53-18.3393-47.53-42.2915s19.2742-42.29,45.2843-42.29c31.6246,0,46.0337,24.888,46.0337,48.84h-67.74l-3.7423,2.62c3.5551,8.6074,12.35,15.9047,27.6945,15.9047,11.4146,0,21.3321-3.7414,31.8118-11.6018l9.356,12.7248C744.5131,148.6906,730.8535,153.7437,717.193,153.7437Zm19.4614-50.5246,1.6835-3.93C734.4085,91.9916,725.8,86.19,714.9472,86.19c-10.6661,0-20.7707,5.0531-25.0752,14.5963l3.3688,2.4329Z" style="fill: #fff"/> <path d="M801.6873,151.1236H782.6V71.7825h19.0871v8.9816h4.4908a34.1458,34.1458,0,0,1,25.6366-11.6018c18.7128,0,32.1853,11.4147,32.1853,32.56v49.4017H844.9137V105.8393c0-11.04-3.5558-19.2751-15.9063-19.2751-11.2275,0-20.022,10.1062-27.32,21.3337Z" style="fill: #fff"/> <rect x="281.0028" y="36.4156" width="21.1679" height="21.1679" style="fill: #fff"/> </g> <polygon points="71.986 44.467 60.893 33.762 60.893 0 43.774 0 43.774 33.681 32.585 44.467 0 44.467 0 62.028 32.663 62.028 43.774 72.726 43.774 106.38 60.893 106.38 60.893 72.725 71.986 62.028 104.877 62.028 104.877 44.467 71.986 44.467" style="fill: #ffbc00"/> </g> </svg> </div> <div class="flex mb-3 lg:hidden space-x-5 text-gray"> <a class="text-charcoal-50 hover:text-white" href="https://twitter.com/TightenCo" role="link" aria-label="Twitter"> <svg viewBox="0 0 20 17" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M17.6439514,2.67547417 C18.4915185,2.14746831 19.1418677,1.31023678 19.4470858,0.312892365 C18.6535188,0.803008922 17.7766039,1.15745731 16.8409931,1.34934833 C16.0943828,0.51822798 15.0272935,0 13.8463344,0 C11.5806773,0 9.74467336,1.91279903 9.74467336,4.27171413 C9.74467336,4.60660674 9.77871691,4.9329437 9.84915185,5.24461383 C6.44010096,5.0661674 3.4172683,3.36725964 1.3922639,0.781008678 C1.0389153,1.41412682 0.83700182,2.14746831 0.83700182,2.92969922 C0.83700182,4.41104901 1.56130774,5.71884132 2.66244057,6.4864054 C1.98978693,6.46440516 1.35704643,6.27006967 0.802958267,5.95228836 L0.802958267,6.0048445 C0.802958267,8.07531195 2.21635264,9.80233114 4.09579151,10.1934466 C3.75066033,10.2936699 3.38909432,10.3437816 3.01344133,10.3437816 C2.74931032,10.3437816 2.49104889,10.3181146 2.24217879,10.268003 C2.76339731,11.9644663 4.27892235,13.2013689 6.07501321,13.2343693 C4.66983624,14.3808265 2.90074544,15.062834 0.979045607,15.062834 C0.648001409,15.062834 0.320478958,15.0445005 0,15.0041667 C1.81604743,16.2154024 3.97253038,16.9230769 6.28983976,16.9230769 C13.838117,16.9230769 17.9632564,10.413449 17.9632564,4.76794187 C17.9632564,4.58216202 17.9609086,4.39760442 17.9526912,4.21549128 C18.7544756,3.61292903 19.4517814,2.86003178 20,2.00324448 C19.2639549,2.34302603 18.4727358,2.57280636 17.6439514,2.67547417 Z" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://github.com/tighten" role="link" aria-label="Github"> <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M9.99907916,0 C4.47773105,0 0,4.47711716 0,10.0003069 C0,14.4184904 2.86503576,18.1663034 6.83876117,19.4886276 C7.33908346,19.5807115 7.5214095,19.2719236 7.5214095,19.0067221 C7.5214095,18.7697597 7.512815,18.14052 7.50790386,17.3062402 C4.72635747,17.9103103 4.13947635,15.9654992 4.13947635,15.9654992 C3.68458209,14.8101538 3.02894503,14.5025937 3.02894503,14.5025937 C2.12099819,13.8825624 3.09770097,13.8948402 3.09770097,13.8948402 C4.10141502,13.9654379 4.62936247,14.9255655 4.62936247,14.9255655 C5.52134811,16.4535437 6.97013414,16.0121551 7.53982627,15.7561619 C7.63068234,15.1103472 7.88913104,14.6695724 8.17459099,14.4197182 C5.95414224,14.1674085 3.6195095,13.3091869 3.6195095,9.47727063 C3.6195095,8.38576997 4.00933116,7.49255655 4.64900703,6.79394702 C4.54587311,6.54102336 4.20270727,5.52380368 4.74722981,4.14745695 C4.74722981,4.14745695 5.5864207,3.87857209 7.4968538,5.17265723 C8.29430001,4.95042819 9.15006599,4.83992756 10.0003069,4.83563031 C10.849934,4.83992756 11.7050861,4.95042819 12.5037601,5.17265723 C14.4129654,3.87857209 15.2509285,4.14745695 15.2509285,4.14745695 C15.7966788,5.52380368 15.453513,6.54102336 15.350993,6.79394702 C15.9918966,7.49255655 16.3786488,8.38576997 16.3786488,9.47727063 C16.3786488,13.3190092 14.0403327,14.164339 11.8131312,14.4117376 C12.1716443,14.7205255 12.4914822,15.3307345 12.4914822,16.2638509 C12.4914822,17.6002947 12.4792044,18.6789036 12.4792044,19.0067221 C12.4792044,19.2743792 12.6596888,19.5856226 13.1667639,19.4880138 C17.1374198,18.1626201 20,14.4172627 20,10.0003069 C20,4.47711716 15.5222689,0 9.99907916,0" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://www.linkedin.com/company/tightenco" role="link" aria-label="Linked in"> <svg viewBox="0 0 20 20" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M0.504468485,6.41311307 L4.40263405,6.41311307 L4.40263405,19.9987194 L0.504468485,19.9987194 L0.504468485,6.41311307 Z M2.35418627,4.71379178 L2.32596425,4.71379178 C0.914863594,4.71379178 0,3.67524651 0,2.36009732 C0,1.01805609 0.94190969,0 2.38123236,0 C3.81937912,0 4.70366886,1.01549494 4.73189087,2.3562556 C4.73189087,3.67140479 3.81937912,4.71379178 2.35418627,4.71379178 L2.35418627,4.71379178 Z M20,20 L15.5797272,20 L15.5797272,12.9683698 C15.5797272,11.1281854 14.8882879,9.8732232 13.3678269,9.8732232 C12.2048448,9.8732232 11.5580903,10.7196824 11.2570555,11.537969 C11.1441675,11.8299398 11.1618062,12.2384428 11.1618062,12.6482264 L11.1618062,20 L6.7826905,20 C6.7826905,20 6.83913452,7.54514022 6.7826905,6.41311307 L11.1618062,6.41311307 L11.1618062,8.54526828 C11.420508,7.61301063 12.8198495,6.28249456 15.0529163,6.28249456 C17.8233772,6.28249456 20,8.23793059 20,12.4446152 L20,20 L20,20 Z" /> </svg> </a> </div> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://duckduckgo.com/?q=Directions+to+1807+W.+Sunnyside%2C+Chicago%2C+IL&t=h_&ia=directions&iaxm=directions&end=what%3A1807%2520W%2520Sunnyside%2520Ave%2Cwhere%3AChicago%252C%2520IL%2520%252060640%252C%2520United%2520States&transport=drive"> 1807 W. Sunnyside, Suite 1G </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://duckduckgo.com/?q=Directions+to+1807+W.+Sunnyside%2C+Chicago%2C+IL&t=h_&ia=directions&iaxm=directions&end=what%3A1807%2520W%2520Sunnyside%2520Ave%2Cwhere%3AChicago%252C%2520IL%2520%252060640%252C%2520United%2520States&transport=drive"> Chicago, IL 60640 </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="tel:+13124487405"> (312) 448-7405 </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="mailto:hello@tighten.co"> hello@tighten.co </a> </div> <div class="hidden pt-3 lg:flex space-x-6 text-gray"> <a class="text-charcoal-50 hover:text-white" href="https://twitter.com/TightenCo" role="link" aria-label="Twitter"> <svg viewBox="0 0 20 17" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M17.6439514,2.67547417 C18.4915185,2.14746831 19.1418677,1.31023678 19.4470858,0.312892365 C18.6535188,0.803008922 17.7766039,1.15745731 16.8409931,1.34934833 C16.0943828,0.51822798 15.0272935,0 13.8463344,0 C11.5806773,0 9.74467336,1.91279903 9.74467336,4.27171413 C9.74467336,4.60660674 9.77871691,4.9329437 9.84915185,5.24461383 C6.44010096,5.0661674 3.4172683,3.36725964 1.3922639,0.781008678 C1.0389153,1.41412682 0.83700182,2.14746831 0.83700182,2.92969922 C0.83700182,4.41104901 1.56130774,5.71884132 2.66244057,6.4864054 C1.98978693,6.46440516 1.35704643,6.27006967 0.802958267,5.95228836 L0.802958267,6.0048445 C0.802958267,8.07531195 2.21635264,9.80233114 4.09579151,10.1934466 C3.75066033,10.2936699 3.38909432,10.3437816 3.01344133,10.3437816 C2.74931032,10.3437816 2.49104889,10.3181146 2.24217879,10.268003 C2.76339731,11.9644663 4.27892235,13.2013689 6.07501321,13.2343693 C4.66983624,14.3808265 2.90074544,15.062834 0.979045607,15.062834 C0.648001409,15.062834 0.320478958,15.0445005 0,15.0041667 C1.81604743,16.2154024 3.97253038,16.9230769 6.28983976,16.9230769 C13.838117,16.9230769 17.9632564,10.413449 17.9632564,4.76794187 C17.9632564,4.58216202 17.9609086,4.39760442 17.9526912,4.21549128 C18.7544756,3.61292903 19.4517814,2.86003178 20,2.00324448 C19.2639549,2.34302603 18.4727358,2.57280636 17.6439514,2.67547417 Z" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://github.com/tighten" role="link" aria-label="Github"> <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M9.99907916,0 C4.47773105,0 0,4.47711716 0,10.0003069 C0,14.4184904 2.86503576,18.1663034 6.83876117,19.4886276 C7.33908346,19.5807115 7.5214095,19.2719236 7.5214095,19.0067221 C7.5214095,18.7697597 7.512815,18.14052 7.50790386,17.3062402 C4.72635747,17.9103103 4.13947635,15.9654992 4.13947635,15.9654992 C3.68458209,14.8101538 3.02894503,14.5025937 3.02894503,14.5025937 C2.12099819,13.8825624 3.09770097,13.8948402 3.09770097,13.8948402 C4.10141502,13.9654379 4.62936247,14.9255655 4.62936247,14.9255655 C5.52134811,16.4535437 6.97013414,16.0121551 7.53982627,15.7561619 C7.63068234,15.1103472 7.88913104,14.6695724 8.17459099,14.4197182 C5.95414224,14.1674085 3.6195095,13.3091869 3.6195095,9.47727063 C3.6195095,8.38576997 4.00933116,7.49255655 4.64900703,6.79394702 C4.54587311,6.54102336 4.20270727,5.52380368 4.74722981,4.14745695 C4.74722981,4.14745695 5.5864207,3.87857209 7.4968538,5.17265723 C8.29430001,4.95042819 9.15006599,4.83992756 10.0003069,4.83563031 C10.849934,4.83992756 11.7050861,4.95042819 12.5037601,5.17265723 C14.4129654,3.87857209 15.2509285,4.14745695 15.2509285,4.14745695 C15.7966788,5.52380368 15.453513,6.54102336 15.350993,6.79394702 C15.9918966,7.49255655 16.3786488,8.38576997 16.3786488,9.47727063 C16.3786488,13.3190092 14.0403327,14.164339 11.8131312,14.4117376 C12.1716443,14.7205255 12.4914822,15.3307345 12.4914822,16.2638509 C12.4914822,17.6002947 12.4792044,18.6789036 12.4792044,19.0067221 C12.4792044,19.2743792 12.6596888,19.5856226 13.1667639,19.4880138 C17.1374198,18.1626201 20,14.4172627 20,10.0003069 C20,4.47711716 15.5222689,0 9.99907916,0" /> </svg> </a> <a class="text-charcoal-50 hover:text-white" href="https://www.linkedin.com/company/tightenco" role="link" aria-label="Linked in"> <svg viewBox="0 0 20 20" fill="none" stroke="none" class="w-5 h-5 fill-current" aria-hidden="true" > <path fill-rule="evenodd" d="M0.504468485,6.41311307 L4.40263405,6.41311307 L4.40263405,19.9987194 L0.504468485,19.9987194 L0.504468485,6.41311307 Z M2.35418627,4.71379178 L2.32596425,4.71379178 C0.914863594,4.71379178 0,3.67524651 0,2.36009732 C0,1.01805609 0.94190969,0 2.38123236,0 C3.81937912,0 4.70366886,1.01549494 4.73189087,2.3562556 C4.73189087,3.67140479 3.81937912,4.71379178 2.35418627,4.71379178 L2.35418627,4.71379178 Z M20,20 L15.5797272,20 L15.5797272,12.9683698 C15.5797272,11.1281854 14.8882879,9.8732232 13.3678269,9.8732232 C12.2048448,9.8732232 11.5580903,10.7196824 11.2570555,11.537969 C11.1441675,11.8299398 11.1618062,12.2384428 11.1618062,12.6482264 L11.1618062,20 L6.7826905,20 C6.7826905,20 6.83913452,7.54514022 6.7826905,6.41311307 L11.1618062,6.41311307 L11.1618062,8.54526828 C11.420508,7.61301063 12.8198495,6.28249456 15.0529163,6.28249456 C17.8233772,6.28249456 20,8.23793059 20,12.4446152 L20,20 L20,20 Z" /> </svg> </a> </div> </div> <div class="flex flex-col w-full space-y-2 lg:w-1/5"> <div class="pb-5 -mt-2 font-serif text-3xl font-light text-charcoal-10">Work</div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/services/"> Services </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/manifesto/"> Manifesto </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/results/"> Results </a> </div> </div> <div class="flex flex-col w-full space-y-2 lg:w-1/5"> <div class="pb-5 -mt-2 font-serif text-3xl font-light text-charcoal-10">Company</div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/about/"> About </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/team/"> Team </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/insights/"> Blog </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/careers/"> Careers </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="/contact/"> Contact </a> </div> </div> <div class="flex flex-col w-full space-y-2 lg:w-1/5"> <div class="pb-5 -mt-2 font-serif text-3xl font-light text-charcoal-10">Community</div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://laravelpodcast.com/"> The Laravel Podcast </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://businessoflaravel.com/"> The Business of Laravel Podcast </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://twentypercent.fm/"> Twenty Percent Time Podcast </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://onramp.dev/"> Laravel Onramp </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://novapackages.com/"> Nova Packages </a> </div> <div class="leading-none pb-1.5"> <a class="font-mono word-spacing-tight font-bold text-sm uppercase tracking-widest pb-1.5 text-gray border-b border-transparent hover:underline hover:decoration-yellow hover:underline-offset-4" href="https://laravel-tricks.com/"> Laravel Tricks </a> </div> </div> </div> </div> <div class="px-6 py-10 text-xs lg:py-8 md:px-16 lg:px-28 bg-charcoal text-gray sm:text-sm"> <div class="max-w-screen-2xl mx-auto"> <div class="flex flex-col items-center justify-between w-full lg:flex-row"> <div class="flex items-center"> <div>漏2025 Tighten Co.</div> <span class="mx-3">路</span> <a class="underline hover:text-white" href="/privacy-policy/">Privacy Policy</a> </div> <div class="flex items-center order-first pb-3 lg:pb-0 lg:order-last"> <a href="https://jigsaw.tighten.com/" class="flex items-center justify-center text-sm text-gray hover:text-yellow transition-colors" > <svg viewBox="0 0 28 28" fill="none" stroke="none" class="w-5 h-5 mr-2 sm:h-6 sm:w-6" aria-hidden="true" > <path fill="currentColor" d="M22.6,1.218H5.4A4.182,4.182,0,0,0,1.218,5.4V22.6A4.182,4.182,0,0,0,5.4,26.782H22.6A4.182,4.182,0,0,0,26.782,22.6V5.4A4.182,4.182,0,0,0,22.6,1.218Zm0,1A3.181,3.181,0,0,1,25.782,5.4v8.229H22.056a.733.733,0,0,1-.659-.407.578.578,0,0,1,.108-.666l.385-.384a1.616,1.616,0,0,0,.468-1.133V10.93a2.217,2.217,0,1,0-4.434,0v.105a1.593,1.593,0,0,0,.469,1.133l.382.383a.577.577,0,0,1,.11.667.733.733,0,0,1-.658.407H14.375V9.774a1.476,1.476,0,0,0-.821-1.329,1.325,1.325,0,0,0-1.533.248l-.383.383a.857.857,0,0,1-.6.25H10.93a1.467,1.467,0,1,1,0-2.934h.105a.857.857,0,0,1,.6.25l.383.382a1.326,1.326,0,0,0,1.533.249,1.476,1.476,0,0,0,.821-1.329V2.218ZM13.625,5.944a.733.733,0,0,1-.407.659.574.574,0,0,1-.666-.109l-.383-.383a1.617,1.617,0,0,0-1.134-.469H10.93a2.217,2.217,0,1,0,0,4.434h.105a1.614,1.614,0,0,0,1.134-.47l.383-.382a.577.577,0,0,1,.667-.108.731.731,0,0,1,.406.658v3.851H9.773a1.478,1.478,0,0,0-1.328.821,1.326,1.326,0,0,0,.248,1.533l.383.383a.847.847,0,0,1,.25.6v.105a1.467,1.467,0,1,1-2.934,0v-.105a.858.858,0,0,1,.249-.6l.384-.383a1.327,1.327,0,0,0,.248-1.532,1.475,1.475,0,0,0-1.329-.822H2.218V5.4A3.181,3.181,0,0,1,5.4,2.218h8.229ZM5.4,25.782A3.181,3.181,0,0,1,2.218,22.6V14.375H5.944a.733.733,0,0,1,.659.407.578.578,0,0,1-.108.666l-.385.384a1.616,1.616,0,0,0-.468,1.133v.105a2.217,2.217,0,1,0,4.434,0v-.105a1.593,1.593,0,0,0-.469-1.133l-.382-.383a.577.577,0,0,1-.11-.667.733.733,0,0,1,.658-.407h3.852v3.851a1.476,1.476,0,0,0,.821,1.329,1.326,1.326,0,0,0,1.533-.248l.383-.383a.857.857,0,0,1,.6-.25h.105a1.467,1.467,0,1,1,0,2.934h-.105a.857.857,0,0,1-.6-.25l-.383-.382a1.324,1.324,0,0,0-1.533-.249,1.476,1.476,0,0,0-.821,1.329v3.726Zm8.979-3.726a.733.733,0,0,1,.407-.659.578.578,0,0,1,.666.109l.383.383a1.617,1.617,0,0,0,1.134.469h.105a2.217,2.217,0,1,0,0-4.434h-.105a1.614,1.614,0,0,0-1.134.47l-.383.382a.574.574,0,0,1-.667.108.731.731,0,0,1-.406-.658V14.375h3.852a1.478,1.478,0,0,0,1.328-.821,1.326,1.326,0,0,0-.248-1.533l-.383-.383a.847.847,0,0,1-.25-.6V10.93a1.467,1.467,0,1,1,2.934,0v.105a.858.858,0,0,1-.249.6l-.384.383a1.327,1.327,0,0,0-.248,1.532,1.475,1.475,0,0,0,1.329.822h3.726V22.6A3.181,3.181,0,0,1,22.6,25.782H14.375Z" /> </svg> Built with Jigsaw </a> <span class="mx-3">路</span> <a href="https://fieldgoal.io/" class="flex items-center justify-center text-sm text-gray hover:text-yellow transition-colors" > <svg viewBox="0 0 27 28" fill="none" stroke="none" class="w-4 h-4 mr-2 sm:h-5 sm:w-5" aria-hidden="true" > <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H24C25.3807 0.5 26.5 1.61929 26.5 3V5C26.5 6.38071 25.3807 7.5 24 7.5H3C1.61929 7.5 0.5 6.38071 0.5 5V3ZM3 1.5C2.17157 1.5 1.5 2.17157 1.5 3V5C1.5 5.82843 2.17157 6.5 3 6.5H24C24.8284 6.5 25.5 5.82843 25.5 5V3C25.5 2.17157 24.8284 1.5 24 1.5H3ZM0.5 13C0.5 11.6193 1.61929 10.5 3 10.5H17C18.3807 10.5 19.5 11.6193 19.5 13V15C19.5 16.3807 18.3807 17.5 17 17.5H3C1.61929 17.5 0.5 16.3807 0.5 15V13ZM3 11.5C2.17157 11.5 1.5 12.1716 1.5 13V15C1.5 15.8284 2.17157 16.5 3 16.5H17C17.8284 16.5 18.5 15.8284 18.5 15V13C18.5 12.1716 17.8284 11.5 17 11.5H3ZM3 20.5C1.61929 20.5 0.5 21.6193 0.5 23V25C0.5 26.3807 1.61929 27.5 3 27.5H8C9.38071 27.5 10.5 26.3807 10.5 25V23C10.5 21.6193 9.38071 20.5 8 20.5H3ZM1.5 23C1.5 22.1716 2.17157 21.5 3 21.5H8C8.82843 21.5 9.5 22.1716 9.5 23V25C9.5 25.8284 8.82843 26.5 8 26.5H3C2.17157 26.5 1.5 25.8284 1.5 25V23Z" /> </svg> Forms by FieldGoal </a> </div> </div> </div> </div> </div> <script src="/assets/build/js/blog.js?id=45ee61b9d5a0eb1398eab9488e554388"></script> </body> </html>