🀲 Help us help you


​

​

​

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 there any tutorials or quick tips you’d like to see to get up to speed faster?

Hit reply or join our Slack to respond. πŸ™

​

Javascript 101: Getting Started

I've been thinking...what is a simple Javascript solution that will immediately help every Webflow user. Do you have an idea? Again, hit reply or join our Slack to respond.

My answer? Every person who builds a Webflow website should be able to add their signature to that website. Kind of like an artist signing their canvas. I think the best way to sign a website is by adding a console.log. Let's see what that can look like.

Basic approach:

The basic approach is very simple.

```
​console.log("This site was built by Edgar Allan.")

```

Advanced Approaches:

You can style text by using CSS in console.log() with the %c directive.

1. Add css to your console.log.

```
​console.log(
"%cThis site was built by %cEdgar Allan.",
"background: #1169fe;color: #fff; font-size: 16px;padding: 8px 0 5px 20px;",
"color: #1169fe; font-size: 20px; font-weight: bold;padding: 4px;"
);

```

2. Add an image.

  • First, you need to encode your image to Base64. You can do that here: https://www.base64-image.de.
  • Add the Base64 encoded image as a background url.
  • Add padding to push your text to the left of the image.

```
​console.log("%cBuilt by Edgar Allan",
"font-size: 20px; background-image: url('data:image/png;base64,iVBOR...'); background-size: contain; background-repeat: no-repeat; padding: 20px 80px;");
​
```

Note that I removed the some of the base64 code since it was so long.

3. Add ASCII art.

```
​console.log(
"%c....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"........................................ ............................................\n" +
"................................... ......................................\n" +
"............................... ....................................\n" +
".............................. ..................................\n" +
"............................ ................................\n" +
"........................... ...............................\n" +
".......................... ...............................\n" +
".......................... ..............................\n" +
".......................... ........................ ..............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........ .............................\n" +
"......................... ........ .............................\n" +
"......................... ....................... .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........ .............................\n" +
"......................... ........ .............................\n" +
"......................... ......... .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... ........................ .............................\n" +
"......................... .............................\n" +
"......................... .............................\n" +
"......................... .............................\n" +
"......................... .............................\n" +
"......................... .............................\n" +
"......................... .......... .............................\n" +
"......................... ............. ... ....................\n" +
"......................... ............. .. ..................\n" +
"......................... ............. .. ..................\n" +
"......................... ............. .. ..................\n" +
".......................... .............. ..... ....................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"....................................................................................................\n" +
"%cBuilt by edgarallan.com",
"font-family: monospace; line-height: 1.2; color: black;",
"color: #5b4c40; font-weight: bold; font-size: 16px;"
);

```

I want to see your website signature. Reply to this email or show everyone on Twitter.

​

​

Your projects, supported by Slater

πŸ‘€ We have a demo template called Boldo that we use for all sorts of demos and testing. You can use the Webflow project and Figma file together.

​https://webflow.com/made-in-webflow/website/boldo​​
https://www.figma.com/community/file/1081611224529759785
​

​

πŸ€™ the Slater Team

​

If Slater helps you create better websites, please support the team behind it.

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

The team behind Slater would like to wish you a Merry Christmas and a happy New Year! πŸŽ„πŸŽ…πŸŽ Get the Santa ASCII art: https://slater.app/projects/11431/pages/27608 Happy coding! πŸ€™ the Slater Team If Slater helps you create better websites, please support the team behind it. Become a Pro Slater User

Earlier this year, we built figdam.com. It is currently used by several of our clients to host files and watermark PDFs. We’d like to bring this file hosting functionality to Slater users. With that in mind, where do you currently store files that Webflow doesn’t support? Would this feature be useful to you? What file hosting features do you need? Let us know. JS 101: File types File storage? Javascript? Let's consider all of the different file types that you could host and then retrieve and...

Hi, Just a reminder that Kendra and Mason will be hosting an EA Office Hours Zoom this Friday, the 13th (spooky…) to chat about topics relating to Chapter 1: Sales for Creative Types. Sign up if you can make it, and bring your questions. Let’s get past any lingering sales ick together. Register to join us this Friday, 12/13 here. Also, if you can’t make it this week, we’re thinking about doing it again next Friday, 12/20 as well, if anyone is game? To ring in the holiday break, we’ll chat...