Updates to Web Lab (2021)

Hello Folks!

We recently made some updates to our Web Lab coding environment and wanted to highlight some of the new features. You’ll see these updates when creating new Web Lab projects or when using Web Lab in Unit 2 of the curriculum.

Better File Organization

You’ll notice that files are now color-coded by their type and have new icons. Hopefully this will make it easier to quickly tell the difference between a CSS file, an HTML file, or an image.

Color Selector

When adding colors within a CSS file, you will now notice a purple icon that appears when you click on a color name. This icon opens a color selector widget, which makes it easier to select new colors for your website. See it in action below!

Image Metadata and Filters

After you upload an image, you can view additional information about the image, such as it’s dimensions, starter code to use the image in your project, and prominent colors that appear in the image. There is also a new feature to apply filters to the image directly within Web Lab. See these in action below!

Project Size Limits

Web Lab now has a limit to how large projects can be - at most 20mb. You can keep track of how big your projects are using the progress meter at the top of each project. Most projects will remain under this limit, unless you are using lots of images. If so, you may want to use an outside image hosting program.

image

Security Updates

We recently made some updates to our Web Lab environment to fix some security vulnerabilities and stop Web Lab from being used to host malicious projects. You will notice that new projects are no longer able to use <iframe> and <script> tags as part of their code. Any existing projects that use these tags will still work correctly - however, once you begin editing these projects, these tags will be automatically removed from the project. Additionally, the <meta> tag was restricted to block the ‘http-equiv’ attribute. This means that the <meta> tag is still supported, but not in combination with the ‘http-equiv’ attribute.

If you were using these tags to embed videos on your website, you can still do this with the tag - see this example for more information. If you would like to use the <iframe> or <script> tags in your projects, we recommend switching to a different web editing environment, such as glitch.com.

We’re excited to bring these new updates to our tools, and hope they make it easier for students to express their creativity by making dynamic, personalized websites!

Cheers,

Code.org CS Discoveries Team

7 Likes

Oh you just made some middle school kids (and teachers) VERY happy!! :partying_face:

4 Likes

Can students bring a widget, such as a counting widget, into their Web Lab websites? I’m going to have CSD students in what admin is calling CSD 2 so I’m looking to expand on Unit 2 by trying learn more about how we can use Javascript to make our websites more interactive.

@koliner,

Can you expound a little on what you mean by “a counting widget?” Because Web Lab is a training tool, external javascript has been disabled for security reasons, but there are other websites where javascript could be included as part of a project such as on http://replit.com

Mike

Mike,
I’m looking at widgets on sites such as this: Free Countdown Timer for Your Website or
JavaScript UI Widgets Library - DHTMLX Suite
so yes, this would involve “external javascript” so I think that you’ve given me the idea of letting students try working in Replit along with exploring Google Sites after Unit 2 to extend their website development knowledge. Thanks!

1 Like