👋, In August, we launched a novel approach to a marketing site with ask.edgarallan.com. Since then, we've been focused on determining whether we built a winner or a loser by refining our data analytics capabilities. So far, the results look promising: check out this update. Alongside ask.ea, we’re also enhancing our data analytics for Slater.app. What does that mean? Over the next several months, we’ll be rolling out updates based on your feedback and user data. Stay tuned—we’ll share our discoveries in future newsletters! -- JS 101: Marketing JavascriptThis week we had a client who wanted to hide or show content based on where the user was coming from. This is a common ask from marketers. So, how can we do this? With URL parameters and cookies. Let's dig into the code we wrote: ``` // Function to set a cookie // Function to get a cookie value by name // Main logic to check query parameters and manage cookies if (value === '1' || getCookie("linkedin") === '1') { That code block may be a little overwhelming so let's break it down: 1. Retrieving Query Parameters We can write a getParam function that uses the URL interface to extract query parameters safely. This avoids potential issues with manual string parsing. ``` The URL Constructor creates a URL object to access its searchParams property. searchParams.get: Retrieves the value of a parameter by its name. 2. Setting Cookies The setCookie function creates a cookie with an optional expiration time. ``` The encodeURIComponent encodes the cookie value to ensure it’s URL-safe. 3. Getting Cookies The getCookie function retrieves the value of a specific cookie by its name. ``` split(‘; ‘) splits all cookies into an array of key-value pairs. find finds the cookie that starts with the specified name. The Optional Chaining (?.) safely handles cases where the cookie is not found. 4. Code Logic The main block checks if the `linkedin` query parameter or cookie is set to 1. If true, it removes the first .container element and sets a cookie. ``` The querySelector selects the first matching .container element. This code showcases best practices for:
You now have a robust solution for managing query parameters and cookies in your JavaScript projects. Let us know if it is useful! Happy coding! 🤙 the Slater Team If Slater helps you create better websites, please support the team behind it.
|
Slater resources, updates and community activity
We’re taking a break from our usual JavaScript content to share some exciting news: Edgar Allan has released a new book, How to Grow & Scale Your Business With Webflow. Created in collaboration with Webflow, this book is a must-read for anyone building a business with Webflow. Filled with insights from 3x Agency of the Year winner Edgar Allan, it’s a playbook for individuals, pro-lancers, and small agencies growing alongside the revolutionary site-building platform. For our Slater users, we...
Slater now has 7389 users. 2060 of you haven't created a file yet. 😱 These numbers got us thinking – we want to make Slater easier and more helpful to all #nocode developers.We’d love to hear from you: Did you find it challenging to get started with Slater? Are there specific areas where you could use more guidance? Do you use JavaScript often in your Webflow projects? Or is Slater your first time exploring custom code? What would help you feel more confident writing JavaScript in Slater? Are...
Do you use GitHub? As the industry-standard platform for code management, it allows you to save snapshots of your code or even automate code deployments to external systems. This week, we quietly rolled out a new GitHub integration, now available to all our paid users! With this feature, you can seamlessly manage code and enhance your workflows directly within our platform. Watch the video to learn how to set up GitHub in Slater. h/t Jason Roach & Pierre Lovenfosse Join our Slack if you want...