​

​

​

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.

• Convert an image to ASCII art: https://www.asciiart.eu/image-to-ascii​
• Add line breaks, \n, and concatenate lines, +. ChatGPT is good at doing this for you.
  ​

```
​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.