{"id":1359,"date":"2021-04-02T19:13:15","date_gmt":"2021-04-03T02:13:15","guid":{"rendered":"https:\/\/coderpad-staging.io\/?post_type=programming-language&p=1089"},"modified":"2023-04-17T04:03:35","modified_gmt":"2023-04-17T11:03:35","slug":"html-css-js","status":"publish","type":"programming-language","link":"https:\/\/coderpad.io\/languages\/html-css-js\/","title":{"rendered":"HTML\/CSS\/JS"},"content":{"rendered":"\n

TypeScript<\/strong><\/h2>\n\n\n\n

HTML\/CSS\/JS pads are pre-configured to support TypeScript<\/a>, but you can define .js<\/code> and .jsx<\/code> files instead.<\/p>\n\n\n\n

IntelliSense<\/strong><\/h2>\n\n\n\n

IntelliSense is running across the entire project, allowing you to see when there are syntax errors or to get quick hints for how to resolve errors or TypeScript issues.<\/p>\n\n\n\n

Shell<\/strong><\/h2>\n\n\n\n

A shell is provided to you so you can inspect your container in more detail.  The shell can be used to install NPM<\/a> packages using npm install <package><\/code>.  In addition to installing packages, the shell can be used for executing a test suite if you have one defined.<\/p>\n\n\n\n

\n

\u26a0\ufe0fWhile it’s possible to edit files directly from the shell, we recommend using the editor to make your changes.  That way, other people in the pad can see your changes as they’re being made.<\/p>\n<\/blockquote>\n\n\n\n

About Vite<\/strong><\/h2>\n\n\n\n

This pad is served by Vite<\/a>.  Changes are automatically captured as you type them, and other people in the Pad can see them.  You can add as many files to the project as you need, as well as any NPM packages.<\/p>\n\n\n\n

We chose Vite because of its fast startup times<\/a> and quick browser updates<\/a> using native ES Modules.  You probably won’t need to change any of the Vite configuration options<\/a>, but if you do, you can edit the vite.config.ts<\/code> file.<\/p>\n\n\n\n

Hot Module Reloading<\/strong><\/h2>\n\n\n\n

Vite provides hot module reloading by default, meaning that changes you make to the files in your project are automatically applied (after a 2 second debounce); there is no need to refresh the iframe to see the changes.  Vite will display any errors directly in the application output, or if there is a system-wide error, in the logs.<\/p>\n\n\n\n

Container Limits<\/strong><\/h2>\n\n\n\n

The container running your application has a few limitations.  Currently, we don’t limit your CPU usage, though this may change in future.  In addition to CPU, we monitor the network bandwidth that is consumed, and limit you to 75 MB for the duration of the container.  Finally, we limit the amount of memory accessible to each container to 2 GB.<\/p>\n\n\n\n

Assets<\/strong><\/h2>\n\n\n\n

Out-of-the-box support for SVG files is included, just add a whatever.svg<\/code> file and then import it wherever you need it.  Other assets will need to be hosted elsewhere and fetched via the shell, or just referenced directly in HTML tags.<\/p>\n","protected":false},"parent":0,"menu_order":0,"template":"","class_list":["post-1359","programming-language","type-programming-language","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/programming-language\/1359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/programming-language"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/programming-language"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=1359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}