First 250 days of software dev - Part 3

December 4, 2022

17 min read

Day 21

I really don't understand how 21 days have passed. I want to work hard, I want to learn a lot because I want to do my job very well. If 21 days have passed so fast, I think I should fit more things into each day. Life is short, even if it is relative. Yes, after this introduction, we can return to today.
//The next paragraph has nothing to do with the job, but I wrote it anyway. You can skip it.
/* Today I looked a lot at what event, event listener, etc. are, what they mean for a website and where they are used. I got lost in the documents, in the problems and their solutions. Your explanations at the end of the day were also useful. But today I thought about this: What is an engineer? If there is engineering for grass, flowers, electricity, buildings, bridges, airplanes, cars, business, physics, mathematics, space, meteorology, metallurgy, computer, software; how could we express this very big term. I think it was the ability to find solutions related to a specific subject. So what could be the similarity of engineering to art? I told myself it could be creativity (typeof 'da-vinci' === 'engineer-artist'). The difference is that in one case the aesthetics were important, in the other the usefulness, convenience and other human factors were important. In this work we are doing, what is connected to art is the issue of creativity. The artwork may not be useful in our daily lives, but the things we make should be useful. Artwork can be made with a passion for perfection, but when we want to achieve perfection, we may never get the result we want and we may become obsessive. If making the fastest car in the world is our definition of perfection, we can think like this: You can take a picture of the fastest car in the world, you can draw it. You can imagine it. But you have to work hard to build it. You need to work as a team. It requires compatibility with people. It requires a lot of money. There may be time constraints. In short, there are many factors to reach perfection, and even if we can't reach it, I think it is enough to take appropriate steps on the way. Creativity? I think developing an algorithm suitable for each problem and reaching a solution is the artistic part of this job. And I think this should be the most enjoyable part. I mean, I guess it's more enjoyable than changing colors in CSS. Of course, this depends on the perspective of individuals, just like most things are relative. Sorry for rambling on so long, I guess I should get to the point.
*/
Today, first of all, what impressed me the most was a problem and a solution to it. It was simple but it was a good example: The problem was an algorithm to give different random colors to 16 different elements created on a web page. I liked the solution very much: Open a loop, let it repeat 16 times, and then use ".createElement" and ".appendChild" to add 16 separate "div"s to the body (as children of the body). Then a function is written in "rgb(-,-,-,-)" that picks a random number between the largest number and the smallest number that can be written. After that, a few different structures are used to change the backgroundcolors of these divs on every mouse click. These structures were as follows: ".addEventListener, .eventobject, event handle property, event handle attribute".Of these different constructs, which all give the same result, today I looked at ".addEventListener" the most.
Another one I looked at, although I looked at a couple of examples other than this one, was a video that popped up when you clicked on a button within the site. It was really cool that it didn't show up until you clicked the button, and then it would show up and then disappear when you clicked on the video. As a similar example, I think the fact that a photo on our site comes up when you click on it was a good example for us, both in JavaScript and a little about SEO.
I'd like to write briefly about what I'm looking at today and what it is, and since I'm actually recording it on my computer as a diary, it would be nice to be able to look at it again in the future and be inspired by it:

Html DOM
An interface between the scripting language and the web page structure. The browser creates a DOM for each web page. The DOM allows scripting languages to access and modify the web page. Thanks to the DOM, javascript can make dynamic HTML pages.
.createElement()
Creates a reference to a new element node with a tag and returns it. It does not create a new element in the DOM, it needs to be used with a method like ".appenChild()".
.innerHTML
Used to access and modify the value of the current content of an element. Similarly ".innerText" and other entities exist, but there are some differences between them.
.getElementById()
Returns an element having the attribute "id" with the value specific. "id" must be unique and should not be used on multiple elements. If it is used, only the first matching element with id will be returned.
.querySelector()
It is to query elements with attributes such as id, class. I skip it because we are implementing it.
Javascript Events
User interaction or browser manipulation on a web page causes the creation of a client-side JavaScript event. Events can be used to manipulate the DOM (such as modifying it) using a JavaScript function. Events can be anything from clicking to moving the mouse over an element. Events are defined as part of the JavaScript API in the web browser.
Event Handler
When an event occurs in JavaScript, the event handler, in other words the event listener, runs.
JS Event Handler
The goal of JavaScript is to make a dynamic web page, i.e. a structure that can respond to events (such as a button click, a page scroll). DOM elements can have a function related to events. These functions are called event handlers and the DOM element is known as an event target.
Event Object
They are passed as parameters in the event handler function. They hold information about the event. Event objects hold information about event target, event type, and associated listener.
.addEventListener()
Event handler is a method to add an event to a specific event on the event target. The advantage is that you can add different events to the event target without overwrite. It has two arguments: String containing the event name and event handler function.

There's a lot more detail, but I think that's enough, as it will be reinforced with practice and tasks. There's also things like bubbling and capturing, but I can explain that later.

Day 22

I tried to understand and make sense of the assignment you gave me today. Although it took some time, I think I overcame it. At first I wanted to understand the subject by searching some keywords like " ('.class') " on google because the code in the assignment had methods like ".find, .css" and these were not recognized. In other words, this code could have been written somewhere else or on another platform and converted to JavaScript here. And I realized that it was. It was a JavaScript adaptation of similar structures written in jQuery. It took me a while to understand how the code works. I realize this: at first some things seem very difficult to the eye, but when you figure out the structure, you realize how simple it actually is. Yes, I may not be able to write this code now, but I think it is also important to understand its algorithm, which I think I understand. During the day, I looked at the event topic again and looked at examples about the manipulation of the html DOM element with jQuery. I think today has been very productive because I feel like we learn something as we come up with problems and try to find solutions to them. In fact, we have seen structures such as object, array, and loop 157.3545 times (the principle of let me enter fractions so that it is thought to be correct), but there may still be missing. I think this is bad, but I think we did a lot of things and learned new things in 22 days. At least I can easily say that for myself. For the rest of the day, I thought that maybe I should rest a bit, so I took a break and read some good articles I found. It felt good to look at different topics. I can say that's all for today.

Day 23

I think today was very good, especially the after-work event was very enjoyable for me. I thank you, the boss and the people who organized this event. Yes, we can move on with our day.
Today was a repetition and I tried to do something myself by examining examples on the manipulation of the DOM element. I examined a few codes and tried to do something myself by following the instructions given on MDN and similar sites. Where I couldn't do it, I looked at the solutions and tried to understand. I also looked at the topics we covered before. I looked again at topics such as method, function, class, promise. Are there places that don't understood? I think very little (although I shouldn't talk big). Yes, there are concepts that I have forgotten how to use, but after a little research, I remember and understand them immediately, so I don't think it will be much of a problem. My only problem is that I don't practice a lot in CSS topics and have a little difficulty in site design. I actually created a site structure by looking at your website and I think it was enough for the first study, but it can be developed further. This was one of the two biggest things that stuck in my mind. The other was the weakness of not making examples on async and promise. We will probably do it later, but that is one of the shortcomings I can say.
That's all I can say for today. Tomorrow I want to add different methods to the ones in your last assignment and work on DOM manipulation. I will try.

Day 24

I think the examples on flexbox today strengthened and taught us much more. Naturally, when I did not flexbox in a task and did many places with absolute, the design was not responsive. But I think this was also a lesson and then I completed the design using flexbox (with your guidance, of course).
I can explain the data structure we need to explain in the last assignment as follows: The whole formed by different patterns repeating each other in 3 main columns arranged side by side. When we examine the carpet, each column has groups of repeating patterns. At the end of each group, the same group is added again from the beginning. I can only guess this because we cannot see the rest of the repeating structures due to the cut of the carpet. But if you look carefully at the end and the beginning of the 3 columns, the repeating structure is visible. I completed the drawing part using only flexbox. Although the skeleton structure is similar, I thought about how to return it to the data structure and how to return it to a two-dimensional array, but I haven't found a result yet. I will sleep early, wake up early and think again.
Today I looked at a different topic at the end of the working hours. I tried to add something to the code you provided earlier for manipulating DOM elements. For example, in popular categories, the 'title', 'alt', the 'title' of the "img" tag and the text expression inside the "span" tag were the same. I made a small addition to the code to update all of these (including an element and its child elements) with a single code. Yes it worked, it was actually simple. I also added another addition to delete an unwanted property if it exists in our tags. Actually, apart from these simple additions, I wanted to use different and very nice algorithms. But to tell the truth, I didn't really think about what I could change in the DOM. Because the most basic things were already in the algorithm. I looked a little bit at what I can change with jQuery to take advantage of it, and if there is nothing more important in the rest of the time, I will look again.

Day 25

I think the concept of flexbox has been well established. With the examples made today and yesterday, I think it was understood very well, by making many applications.
The most important part of the day was not formatting HTML using the flex feature, but trying to create a data structure based on the carpet pattern with javascript, building an algorithm and somehow transferring it to the language I will code in. I tried at first with the do...while loop and the ways you said, but I couldn't get the logic in my head, and then I thought a little bit about the problem and thought about what other solutions there might be. I wanted to try my luck with the last solution method that came to my mind. But due to a logic error, the code I wrote did not give the correct output. Frankly, I congratulate myself on my effort. After all, I tried, but I tried the wrong thing, and I finally realized what I should have realized in the first place. Now I realize even more clearly that when I am given a problem, I need to understand the problem thoroughly and then develop a good solution. Actually, I know this, but as I come across different algorithms, there are completely different solutions that can be developed for them. And although this is really difficult at first, it makes you very happy when you can write something in a foreign language (programming language).

That's all I have to say. Today, when I realized that I couldn't build the algorithm I wanted after all the work, I thought that I still had a long way to go.

I think that was the cliché motto of the day for me:

No pain, no gain.

Day 26

I struggled today, with CSS. I learned how to use Flexboxes, but I couldn't get it right when I was designing that site. I was going to come back after work and look at it again, but I decided to leave it for tomorrow. I don't like to leave a job unfinished and that's why I'm not very comfortable, but if I couldn't do it, I couldn't do it, and then I need to take a deep breath and start again.
Today, I looked at the code you wrote in the morning. I reviewed the logic and analyzed the functions and loops with each element. I added the most important parts as a comment line to the code so that I can understand it more easily the next time I look at it.
I was looking at JavaScript this afternoon and I realized something: I don't really understand the difference between prototype and constructor. I did some research and looked at examples and explanations, but I still don't understand it. I need to look at that difference again
An important enlightenment of the day was to realize that JavaScript is dealing with objects. Functions, arrays are actually objects and primitives ( boolean, number, bigint, string, symbol) other than null and undefined are not objects but they behave as such for JavaScript. I remember we have covered these topics before, but I forgot some parts of it, so I had an enlightenment in my own way.

Day 27

I spent the whole working day designing the website. Yesterday I had a bit of a hard time doing it at the beginning because I wanted to write it myself from the beginning without copy and paste. But when I looked at the HTML/CSS elements of the site, I wanted to get some things. This time it was really confusing. So today I woke up early in the morning and watched some videos at home about the subject. Then I did it during working hours. Even though it was a little slow and lacking, I think it was a good work.
After work, I did some research on Javascript, algorithms, data structures.

Content aware image resizing in javascript has been examined. Since Typescript is used and it is out of my current level of knowledge, I just tried to grasp the general structure and logic first. While studying the algorithm, I came across "Dynamic Programming". I learned the differences between using DP and recursive functions to get a result. It is possible to get Fibonacci numbers with a recursive function. But so many operations are assigned to the callstack that it tires the system unnecessarily and makes the process longer. To find the 20th term of the Fibonacci numbers, 21981 calculations are needed, whereas with the dynamic programming algorithm, 55 calculations are needed to complete the process. Memoization technique is very useful in this sense. With memoization, a cache-like structure is used and what has been calculated before is kept in an object. And when needed, the direct can be retrieved from there and repeated calculations are prevented.

When I looked back at the example, I realized that our goal was to reduce the width or height of a photo while keeping the parts of the meaning or content that were important and that we didn't want to deconstruct. To do this, it was necessary to analyze the pixels in the photo and to do things accordingly. We defined each pixel in the photo according to its color intensity (pixel's energy) and performed operations on it. The goal was to create a map for the pixel energy of the entire image and to obtain a path on that map. If the width was to be narrowed, the path with the lowest energy density on the energy map from the top to the bottom of the image had to be selected. For this, the Dynamic Programming algorithm was used (there is a comparison like Dynamic Programming vs Divide-and-Conquer, but I will look at that later).

I looked at these in the evening because I really wanted to understand algorithm-related topics and because trying to solve things is (in my opinion) very enjoyable. Javascript Algorithms , a new target resource, is found , and if there is free time, I will try to review some topics, learn what I don't know, and try to understand how different problems are solved.

Day 28

Today was also mostly about CSS. Since I haven't learned anything new about the subject, these lines won't be long today. Because most of the day was spent practicing and improving what I learned, what I saw, what I read, what you told me. Towards the end of the day, I thought about the 100-sentence list you mentioned. I wrote a few sentences, but since I didn't know the customer base of the work done in general, their wishes, the things that are bought and sold in the game world, I researched them a little bit afterwards. I looked at the complaints about the site, comments on blogs, sample questions in the bot or live support section of other similar sites. I saw people who entered the "agar.io"-like game on the site and accessed the game from the site, and I was a little curious and I searched their mouths about the site. Then I took a look at the websites of companies doing this job in foreign countries. There are some with very good design and some that look bad. There are many pictures in the site and it opens fast, as well as sites that tear themselves apart to load for 10 seconds.
That's all for today.

Day 29

I'll never forget this day. I've been working with node.js for 1 month, and I've made fun of myself enough internally by coming to the ridiculous thought that I need to install node.js. But there was a reason why I asked. Because I didn't know how to install express.js and I saw these things for the first time. I wondered if I should install node.js and open it separately from visual studio. Confusion. I say it can be and I continue.
Today I encountered concepts I had never heard of before. Serial and parallel communication, clock signal, mac and ip address difference, internet101 topics in general. I encountered many things I didn't know, I learned what the things I heard were actually. I learned TCP, UDP protocols, what Websokcket is, cloudflare and ddos attacks and syn attacks are prevented. I noted many more things, but I couldn't look at the details while researching express.js.
I worked on what the "express.js" library (which can be thought of as a framework or module) is this afternoon. In PHP, servers like apache, nginx are used as http servers. Express.js has itself as a virtual server as far as I understand. Instead of adding such big files and programs to the computer, it is enough to download the express.js library. What is it used for? So far, we've worked with JavaScript on the client-side, that's how we've worked. We haven't gotten into the server-side, the back-end, the brain part of the site. Yes, that's where express.js comes in. But here's the thing: why do we need express? For example, node.js has an http module, isn't that enough? It's not enough. Yes, both are used to create servers, but express.js offers many features that are incomparable. For example, it is also used in API based app design. It provides an MVC-like structure. It works async and single thread. It is said to provide very fast I/O, but I honestly don't understand that part.
Let's talk about our objects: we have two objects, request and response. These objects are passed as parameters of a callback function. This callback function is called middleware or handler (I haven't looked at the difference between them yet in terms of meaning and usage).
Request object presents the HTTP Request and this object has properties like "query string, body, HTTP header, parameters". We can call these properties as req.query, req.cookies, since we are talking in normal JavaScript language.
Response object specifies the HTTP response sent by the Express app when the HTTP request arrives. In short, it sends a response to the browser. If res.send(), res.redirect(), res.render() are used once, they cannot be used again. It will give an unwanted error otherwise. It is an object with methods such as res.cookies, res.clearCookie, res.redirect res.send.
GET and POST methods are HTTP requests that are used to create a REST API. (I have superficially researched the concept of REST, but I didn't look into the details because I guessed we will get into it later). With the GET method you can only send a limited amount of data because the data is sent in the header, but with the POST method you can send more because the data is in the body. Therefore the GET method is not safe because the data appears in the URL bar.
I didn't know what 'fs' meant, it's a file system module. It allows working with the file system on the computer. You can read, write, create, update, update, delete, rename files.
The difference between app.use() and app.get():
- App.get(): Used for a specific route. For example, if app.get('/book') is called, it cannot access subdirectories (child, node, or something similar) in the book directory. It only accesses the specified directory. And of course only as long as the method is get.
- App.use(): used to connect middleware to the application. We can say that it is used to install the middleware function. The difference is that this method is valid not only for a specific route, but also for all sub-branches in that directory. This is the biggest difference between them. And if we want to use use like get, we have to use regex and it can make the process longer and more complicated. That's why we need to use "use" when necessary, "get" when necessary, and "all" when necessary. I will learn these places as I develop and work.

Day 30

It has been 30 days since you asked us to write a report every day. So what happened in 1 month? We covered the most basic topics such as algorithm, data structures, design pattern, introduction to programming with JavaScript, HTML, CSS. I think a lot of things have settled down about these topics. I can grab it immediately with a short google search in the forgotten places. Now that we have moved to the server-side part, we are back in the comfort zone (relative) and I am glad that we did.
What we learned today: in order to ensure communication between client-side and database, we need to do some operations to ensure communication between client-side and web-server.
Now someone came to me. He said, I want to go to this directory of your site. I said, okay, let me think about it and I will get back to you. First I looked at a man. Has this man been here before, is he familiar (cookies), which directory he wants to enter (req.url or our first parameters in get, post methods, if I take this man to that directory, what should I do afterwards (redirect, res.send, etc.): This is what we did today. We connected the client and server sides together and that's it for today.