When we first released our HTML trinkets last Fall, we were excited about providing the opportunity for teachers to teach the web. Of course HTML helps build an understanding of how to properly structure web pages and with inline CSS you can easily style pages. This separation of concerns is critical to creating basic web pages. As anyone who has put together a web site in recent memory knows though, JavaScript is the special sauce for creating engaging, dynamic sites. Today, we’ve released functionality that lets you not only use JavaScript in HTML trinkets, you can also utilize our tabbed interface to separate HTML, CSS, and JavaScript into their own files. Today you can truly teach the web using Trinket!
Let’s take a look at a simple image carousel example.
index.html
Our default HTML file, like many web pages, is named index.html. This page can be a complete HTML page or just contain a small portion of HTML depending on what area of HTML you’re focused. Notice in our HTML that you can reference other CSS and JavaScript files in your trinket simply by their name. For example, main.css is referenced in index.html using the link tag below.
<link rel=”stylesheet” href=”main.css”/>
You can have multiple CSS and JavaScript files to better organize your page.
main.css and main.js
These files contain just CSS and JavaScript, nothing else. We called them main.css and main.js but you can name them anything you like. As you create or edit these types of files you’ll notice that our editor understands what type of file you’re working on and appropriately highlights keywords and auto completes certain sections.
In the example above, you can click each tab to see or modify the underlying CSS and JavaScript. Want the images to swap faster or slower? Go to the main.js tab, find the link where setInterval is called, and change 5000 to another value. Click the Run button and your timer is now in place!
Referencing external files
We currently allow you to reference external JavaScript files hosted by Google at https://developers.google.com/speed/libraries/devguide. More content delivery networks (or CDNs) will be available soon. If you have a favorite CDN or library that you’d like to see available send us an email and we’ll check into adding it.
One other thing to consider is that any image you include in an HTML trinket must be hosted on a site that supports https. All trinket.io pages use https and can only load images from other sites also using https. We are looking into letting you upload images directly to trinkets in case you don’t have a site using https.
Build a multi-page site!
Here’s another example that shows how you can link to other HTML pages inside a trinket. We start with a simple index.html page that has 3 links. Each link takes you to a new page with one of the images we saw in our earlier example. To get back to our index.html page we add another link at the top of each additional page.
We are excited to see how this update can help if you’re teaching the web. Keep us updated with your progress and as always your feedback is welcome and what helps us deliver the best tool. Send us a note if there’s anything about trinket we can make better for you.
P.S. Ever wondered what kinds of other trinkets are being created? If so, take a look at our gallery. It’s a work in progress but is a great place to find inspiration and to see what’s possible with Trinket. If you like or think it needs to be improved let us know!