​

​

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 parse with Javascript. After we review the different file types, we will review how you can handle JSON–the primary format to retrieve and pass data.

JSON Files

• Extensions: .json
• Use Case: Exchanging structured data.
• How:
  • Use JSON.parse() to convert JSON strings into objects.
  • Use JSON.stringify() to convert objects into JSON strings.

Javascript Files

• Extensions: .js
• Use Case: Executing Javascript code.
• How: <script> tags in browsers or dynamic imports like import().

HTML Files

• Extensions: .html
• Use Case: Parsing or manipulating HTML content.
• How: DOMParser or fetching the file and inserting it into the DOM using innerHTML.

CSS Files

• Extensions: .css
• Use Case: Applying styles dynamically.
• How: Inject <style> or <link> elements into the DOM.

XML Files

• Extensions: .xml
• Use Case: Reading structured data (e.g., RSS feeds).
• How: DOMParser to parse XML strings, or XMLHttpRequest/Fetch API.

SVG Files

• Extensions: .svg
• Use Case: Displaying vector graphics.
• How: Embed directly into HTML or manipulate via DOM or libraries like D3.js.

CSV Files

• Extensions: .csv
• Use Case: Tabular data.
• How: Parse using libraries like PapaParse, or manually process lines and commas.

Binary Files

• Extensions:.png, .jpg, .gif, .mp4, .pdf, etc.
• Use Case: Loading media assets or analyzing binary data.
• How:
  • Use <img>, <video>, and <audio> tags for rendering.
  • Use ArrayBuffer and Blob objects for binary data manipulation.

Plain Text Files

• Extensions: .txt, .log, etc.
• Use Case: Reading plain text for processing or display.
• How: Fetch API or FileReader in browsers, fs module in Node.js.

Markdown Files

• Extensions: .md
• Use Case: Rendering documentation or blog posts.
• How: Parse using libraries like marked or showdown.

​

​

Now, Let's go a bit deeper on JSON (JavaScript Object Notation). JSON is a lightweight data format often used for data exchange.

1. What Does JSON Look Like?

JSON is a string representation of an object or array.

Example:

{
"name":"Alice",
"age":30,
"isStudent":false,
"skills":["JavaScript","HTML","CSS"]
}

2. Parsing JSON

JavaScript provides the JSON.parse() method to parse JSON strings into JavaScript objects.

Syntax:

JSON.parse(jsonString);

Example:

const jsonString = '{"name": "Alice", "age": 30, "isStudent": false, "skills": ["JavaScript", "HTML", "CSS"]}';
const parsedObject = JSON.parse(jsonString);

console.log(parsedObject.name); // Output: Alice
console.log(parsedObject.skills[0]); // Output: JavaScript

3. Parsing JSON from an API Response

When working with APIs, you often get JSON data. Use the Fetch API to retrieve it.

Example:

fetch('https://api.example.com/data')
.then(response => response.json()) // Automatically parses the JSON
.then(data => {
console.log(data); // JSON data as a JavaScript object
})
.catch(error =>console.error('Error fetching data:', error));

4. Converting JavaScript Objects Back to JSON

Use JSON.stringify() to convert objects or arrays back to JSON.

Syntax:

JSON.stringify(object, replacer, space);

Example:

const object = { name: "Alice", age: 30 };
const jsonString = JSON.stringify(object);
console.log(jsonString); // Output: '{"name":"Alice","age":30}'

Pretty-Printing JSON:

const prettyJson = JSON.stringify(object, null, 2);
console.log(prettyJson);
/* Output:
{
"name": "Alice",
"age": 30
}
*/

That's it. Let us know if and how you use JSON in your projects?

​

​

Thanks for the mention on Twitter, @Narro_Labs!

Narrow Labs @Narrow_Labs Upgrade your web design with AI! 🚀 Try @Slater_App for empowering website creation! 💻 🔍 Find tools to simplify your workflow and realize your ideas, no matter your skill level. 👉 Explore tips and results to enhance your projects with AI! 💪💖 #WebDesign #AI #TechTrends 10:30 AM • Dec 10, 2024 2 Retweets 2 Likes

​

​

Happy coding!

🤙 the Slater Team

​

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