β β β We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further. But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library. πΊπΈ Render and animate an American flag on a canvas with dynamic waving effects. βhttps://slater.app/community_library/american-flag-a0bc5d89-a5cd-4910-a245-db0274d495f3β From Jared Malanββ β βποΈ Script for a hover-based tab interface with dynamic content display. βhttps://slater.app/community_library/tabs-switch-on-hover-6bbca64b-b43b-4119-883c-60b02e3673cfβ From Andrea Morgan β β π Toggle visibility of text sections with "Read More" buttons βhttps://slater.app/community_library/expand-text-on-click-d8dd845f-ee47-4c37-b884-467b9da2bbedβ From Andrea Morgan β β β βJavascript 101: Javascript and CanvasIn the animated flag script, we leverage the Apple first introduced the A short time later, other browsers became interested in the technology and the W3C (World Wide Web Consortium) took over to provide a formal standard. Let's look at some basics for interacting with the 1. Add a canvas to your Webflow project:
β 2. Access the canvas with JavaScript
The β 3. Draw on the Canvas Now, you can use the Draw a Rectangle
β Draw a Line
β Draw a Circle
β Draw Text
β That's the basics. Try experimenting with different shapes and methods to get comfortable with the Canvas API. Maybe generate a flag. :) β Your projects, supported by SlaterOver the last couple of emails, we discussed code that was used for https://www.sequoiacap.com/trainingdata/. It's live. Check it out. β Happy coding! π€ the Slater Team β If Slater helps you create better websites, please support the team behind it.
|
Slater resources, updates and community activity
You may recall that the original Slater had access controls for projects and files. We didn't want just anyone going in there and rewriting our Javascript. However, managing access for teammates became cumbersome (I even added a "god mode" to give myself access to any project or file). Since we generally trusted each other and never had issues, we decided to leave it out of the latest version of Slater. That said, we understand that some teams work differently, and maintaining control can be...
We're going to take a brief break from the regular newsletter format to celebrate the release of ask.edgarallan.com. Today, let's hear from Mason Poe, the Founder of Edgar Allan and Slater. I'm thrilled to announce the launch of ask.edgarallan.com and the start of a new conversation. We can all feel it: the web is changing in ways that seem both dramatic and, in a weird way, imperceptible. At times, itβs hard to know where to start exploring what could be next. Sometimes, when you think...
Our new Edgar Allan website, which we're launching next week π€«, uses over 3,000 lines of code. Itβs a bit unwieldy! To better support the new EA website and similar JavaScript-heavy projects, weβve added slater_import. This feature allows you to write a function once and then reuse it across all the files in your project. You can see how to use it here. β¬οΈ Not ready to watch the video? No problem. To import a file, simply start typing the name of the file you want to import and click on the...