Today I’m launching the website after a week of morning work sessions, and I’m really happy about the result. Surprisingly, what took time was not on the to-do list. One thing was design, even though I stuck to what I know. The other was text. I wanted to document the journey, for myself but also for others. Much like reviewing my code on GitHub, I started a blog to provide insights into “my” code—the process and ressources behind the work. I enjoyed writing thought. Taking time to step back and analyze my journey was important to understand where my interests and strengths lie.
!!! Hope you can help me on this !!!
My animation works fine locally but somehow takes time to load online. I don’t know if it’s a server problem or if the code is too heavy … ??? … I really don’t know what to do. Any idea ?
I think finally you may have found your answer to this question:
I put the effort and understand how it articulates and the logic behind it but the more I do those exercises, the more I ask myself if this way of learning is obsolete. I completed the exercise in 5 minutes with chat GPT. In real life, if I need to solve a problem, I would also turn to a GPT. So what’s the point ?
Maybe one day we’ll be there that you do not need to understand programming languages anymore to build websites. For small projects, we might already be there. There are resources like Webflow that let you build attractive websites without having to write a single line of code. Tools like CGPT can also be a great help, but they still deliver rubbish sometimes. At the current stage, you still need to understand what they suggest to make them a really helpful resource.
I’m not sure what exactly you mean with slow loading – I did not observe that. Just a little sluggish behaviour of the eye movement, sometimes. But I have a very fast machine.
I don’t know if this is the reason for it, just an observation. One thing that does not seem very efficient to me is this snippet:
function movePupils(e) {
pupils.forEach((pupil) => {
const rect = pupil.getBoundingClientRect();
const x = (e.pageX - rect.left) / 30;
const y = (e.pageY - rect.top) / 30;
const transformX = x + "px";
const transformY = y + "px";
pupil.style.transform = "translate3d(" + transformX + "," + transformY + ", 0px)";
});
}
You define the same const variables on every little movement of the mouse here. And you get the position (const rect) on every little mouse move – that means several times per millisecond which is completely unnecessary. You need all that just once. The only values you need to get inside the event listener function movePupils are e.pageX and e.pageY.
Mirja, thanks for taking the time to write this detailed answer! About the JS, I ask ChatGPT (again) to explain the code and shared your remarks. Here’s what he suggested. What do you think ??? At this point in my studies, I wouldn’t be able to create this code from scratch. I can read it, I understand the terms … but I can’t make sense of it. I was glad it worked though, because small wins keeps the motivation level up.
You quoted me earlier. I wrote this in the middle of the JS section of the curriculum when everything was abstract and not design-related. I have to say, I was really frustrated. It got better later on when it was applied in HTML, and I was able to put this knowledge into practice.
The more I study and work on personal project, the more I understand that the coding aspect of it is not what interest me the most. There is creativity and also … beauty in it, but my strength lies in concept and design. The field of front-end engineering is so vast, I can’t picture myself knowing-it-all. I know where I want to put the effort, and for the rest, I’m happy to be able to pull-out some tricks when needed!
The difference of both snippets are minor, there are still 5 const declarations inside the movePupils function.
Everything inside the movePupils function is done many times each second. So every time the user moves their mouse, their computer has to find five locations to store the very same values, again and again. That is costly and unnecessary.
I’m a little reluctant to deliver you an alternative implementation of this snippet here as CGPT would (endlessly, patiently and politely – I already got a lot of apologies from GCPT for flawed code suggestions :-)) because this is a learning platform and not meant for debugging CGPT’s code. That would also be a little frustrating, tbh.
Keep the function that is executed on every mouse move as simple as possible. Do not define any variables inside the function’s body. Add the event listener to every single item of the array. That way, you don’t need to perform a forEach inside the function – again and again. Let is just perform one line.
I created a similar effect for my website. I do it by assigning a new value to a css variable on mouse move. That is a more performant way, I think. You can find the code in a codepen:
Thanks for sharing your code. I understand it can be simplified and will come back to it, but not now. I’m starting Javascript part 3 today, hopefully, I’ll get more familiar with the topic.
I saw on your profile that you’re living in Friedrichshain ! I saw you are a designer too. I guess we’re at the same point in our career (you being steps ahead ofc) Maybe we could have a coffee sometimes, quite sunny these days
