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):

screenshot of user page

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 the async or defer attributes 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".

heavy machinery (hopefully) causing heavy loading

Link zu webpage: https://hub.xpub.nl/chopchop/~bernabereit/bb-week4.html

Week 5

Assignment: Do something with imagemagick ...

"ImageMagick is widely used in industries such as web development, graphic design, and video editing, as well as in scientific research, medical imaging, and astronomy. Its versatile and customizable nature, along with its robust image processing capabilities, make it a popular choice for a wide range of image-related tasks.

ImageMagick includes a command-line interface for executing complex image processing tasks, as well as APIs for integrating its features into software applications. It is written in C and can be used on a variety of operating systems, including Linux, Windows, and macOS." [https://imagemagick.org/]

I had big ideas, things I was looking forward to do with imagemagick - it seemed in class like a tool that'll make my life easier. Yet trying it out without a step by step explaination, it was harder then I thought. Since I got frustrated only achieving erros, I did what worked in class, edited some of the images in Bridge + CameraRaw (also a fast way to edited loads of images but you have to pay for it - thanks not Adobe) and then combined everything with imagemagick again. I also wanted to have some gifs within the tiles but I haven't found a way to create multiple gifs from only a specific number of images - so far it is just some tiles in different colours. :(

c/she/eap webpage

Link to webpage: https://hub.xpub.nl/chopchop/~bernabereit/magick/tiles-sheep.html