User:Berna Bereit SI23
Week 3
Assignment: Make your own userpage on chopchop (https://hub.xpub.nl/chopchop/~YOURUSERNAME) as part of the quilt and (optional but nice) contextualize the web quilt in some way (keeping an external visitor in mind):
Since I am not new to html, css and js it was easy to set up a basic userpage. Yet I am not to profound in coding javascript which I'd like to extend. So I chose to use a javascript animation as the center piece of my site. I found it on codepen and was able to change some basic styling attributes to fit it the rest of the design. On the right and left side are additional informations about who's site it is, in which context is it created, where can others find the js animation and what is a webquilt as well as the navigation bar to guide through the web quilt.
Link to userpage: https://hub.xpub.nl/chopchop/~bernabereit/
Week 4
Assignment: Create additional pages for the quilt that reflect on this week's input. Transform your strike campaign into HTML. Or as suggested build a page that slows down the browser or even manages to crash it. Add some sand in the gears :D
In a first step I asked ChatGPT to list html/css/js elements that make a webpage slow in loading - this was the response:
"Several HTML, CSS, and JavaScript elements can contribute to slow page loading if not used or implemented properly. Here are some common factors:
HTML:
- Large Images: Including high-resolution or uncompressed images can significantly slow down page loading. Optimize images and consider using responsive images to load different sizes based on the user's device.
- Excessive DOM Elements: A large number of DOM elements, especially nested ones, can slow down rendering. Be mindful of your HTML structure and try to keep it as simple as possible.
CSS:
- Large CSS Files: Having large CSS files with unnecessary styles can increase loading times. Minimize and concatenate CSS files, and consider using critical CSS for above-the-fold content.
- Render-Blocking CSS: Placing CSS in the
<head>can block the rendering of the page until the CSS is downloaded and parsed. Consider using techniques like asynchronous loading or moving non-critical CSS to the end of the document. - Too Many Selectors: Overly complex or specific CSS selectors can slow down rendering. Use efficient selectors and avoid unnecessary complexity.
JavaScript:
- Large JavaScript Files: Including large JavaScript files or multiple scripts can significantly impact loading times. Minify and concatenate scripts, and consider lazy-loading non-essential scripts.
- Blocking Scripts: Placing scripts in the
<head>can block the rendering of the page. Use theasyncordeferattributes or move scripts to the end of the document. - Synchronous Requests: Synchronous AJAX requests can block the browser while waiting for a response. Use asynchronous requests to prevent this.
- Inefficient JavaScript: Poorly optimized or inefficient JavaScript code can slow down the browser. Optimize your code, avoid unnecessary loops, and use performance-friendly techniques.
- Excessive DOM Manipulation: Frequent manipulation of the DOM, especially in a loop, can cause reflows and repaints, impacting performance. Batch DOM changes when possible.
- Unoptimized Animations: Complex or frequent animations can be resource-intensive. Optimize animations, use CSS transitions/animations where possible, and leverage the browser's hardware acceleration.
Other Considerations:
- External Dependencies: External dependencies, such as third-party scripts or stylesheets, can introduce delays. Minimize their use and consider asynchronous loading.
- Server Performance: The server's performance and response times also affect page loading. Optimize server-side code and use content delivery networks (CDNs) to serve assets.
- Network Latency: Slow internet connections can affect page loading times. Optimize assets for faster downloads and consider implementing a Content Delivery Network (CDN)." [ChatGPT, 26.01.2024]
I went for a script that endlessly loads images from a folder. With the browser extinction "Download All Images" it is easy to search with any search machine for images and then you can download all the images that are loaded on the webpage. In a next step the files need to be transformed and renamed into "image[number].jpg".
Link zu webpage: