Weekly web-dev learning #1

Last week was the beginning of a new routine for me: I decided to study web development every day. And why not log what I've learned weekly? Here is what I've learned this week.

dom-tower

Let’s wrap up the big plan one more time: Me and my wife are planning to move to the Netherlands in May 2022.

I currently work as a research assistant, a rookie academician. Although I’d like to continue being an academician in case we stay in Turkey, I don’t expect to be a researcher in the Netherlands just because I have a hard time defining a problem and focusing on the research topic. I do it currently in my PhD thesis, but I ask myself, “if you are struggling that hard in PhD, what will you do in a postdoctoral study in the Netherlands?”. There is fear indeed, and it is not for nothing: I once failed getting the MA degree from Radboud University.

So what to do in the Netherlands? Graphic design? No, they are light years ahead from what is being done in Turkey. Web design? No, I don’t trust my portfolio and I don’t expect to improve it in one year. Web development? No if I stay still in my current knowledge of HTML/CSS/JS. Yeah I know how to build mobile-first, responsive websites. I use SCSS as a style preprocessor in my projects, therefore I have touched the terminal a bit. I can read what a piece of code does in practice and write small snippets of code that solve my problems (checkout the site.js of this website). I can build WordPress themes from scratch (except for the theme admin panel). I can do freelance work with all these knowledge in Turkey, and it satisfies the needs of the clients. But finding job in Netherlands? No, I don’t think so. That’s the point where my current rush into self-training on web development fits in.

I’ll be a web developer

First, why web development over web design? Because web design is based more on impression at the end of the day, despite all the research and function behind it. Web development, on the other hand, feels more reliable on buildable knowledge. Yeah, I feel like I can build the knowledge and skills needed to be a developer in a given period of time but I cannot obtain the insights for a successful web design on my own, living in Izmir, doing my full-time job along with the PhD thesis. I see myself at a mid-size company that is inclusive enough to accept an English-speaker teammate (and is patient for me to learn Dutch language in progress), developing web apps based on the requirements. As far as the requirements are satisfied, it is fine. However, as I imagine working as a web designer, I’d probably always have a kind of impostor syndrome since I’d feel the need to “fly” when designing a web interface, even though the actual work would meet the requirements laid out in the brief. In the end, I can do both in Izmir. But I need to improve myself in one of these significantly before looking for jobs in the Netherlands. I feel like it’s more feasible to improve oneself as a developer in about one year to get a decent job. So here I start a routine for studying things like React and TypeScript.

Up to this point, I defined myself a generalist who could do many different things. I still am maybe, since I can design a website, develop it to be browsable, create a branding, make logos, posters, brochures, magazines, yeah, magazines I did, write articles, edit videos, etc. I went to courses that teach software development in ASP.NET, technical drawing in AutoCAD and 3D modelling in 3ds Max. I graduated from electrics and electronics engineering, I then exchanged my scholar life into the design studies. With that change, I now work in the academy. My CV is like a mixed soup adding a little of all of these loosely connected or disconnected things. And next year, I need to omit some of these skills in order to provide a more focused resume. Maybe I’ll be creative using whitespace for having a brand new direction in my career. Time will tell, but what I’ve already decided is to have a website that reflects my knowledge and a Github profile that showcases my study over the year. I don’t feel ready to write tutorials on what I’ve learned yet, but I can make a recap so that I can remember later.

Let’s practice

Up until this week, I already started watching video tutorials on React, but I started coding along on Wednesday. Since then, I code consequently.

I’m not that new to React. I previously studied it from Codecademy thanks to their free premium membership given away for the pandemic situation. It was not that bright though. What made me say “I am familiar to React” was the course by Neil Cummings called Complete guide to building an app with .Net core and React that I studied in June 2020.

What I’ve learned from the picture app

I am currently following the Modern React with Redux [2020 Update] course by Stephen Grider. I picked some of the projects in this course to code along and started with the picture app that pulls images from Unsplash API based on the search term. What was new to me was the ref system in React. The project uses class-based components, so the usage in Hooks is currently unknown to me. First, you define a ref in the constructor method:

this.imageRef  = React.createRef()

Then add a ref property to the image you want to reference, equal to this.imageRef. After that, when the component first renders, an event listener based on this ref is added (to the componentDidMount lifecycle event):

this.imageRef.current.addEventListener('load', this.setSpans)

And setSpans is a callback function that gets the height of the image from the image as follows:

const height = this.imageRef.current.clientHeight;

Yeah, in the end, React managed to get to know a DOM element’s property. Otherwise it would see 0px since the component did not mount yet.

I also learned a bit of CSS grid. I have always used flexbox in the more recent projects after condemning the use of floats and clearfixes, so grid was an untouched topic for me. I touched a bit, but I’ll follow a dedicated tutorial for that later. Stephen Grider tried to do a masonry layout using the CSS grid, and praised the result in the video. But I dislike it since the horizontal spacing between the images are not equal.

Finally, the project looks like the following image. The Github repository for the project is here.

What I’ve learned from the video app

Next, I followed a project in which the user gets 5 video results for their search from YouTube API. Not much special is done beyond the basic React knowledge, except for a data flow from a child to the parent. Well, this trick was also done in the picture app I introduced above, but let’s explain this as part of this video project: We tried to get the term written in the <SearchBar /> from the parent <App /> component since the API connection is done at the <App /> component.

To do this, we use a callback function that is passed down as a prop to the child component. This callback function onTermSubmit defined at <App /> gets the elements from the API and then sets the images state with the response. This function is passed down as a prop for <SearchBar />. SearchBar component has a function onFormSubmit which is called when the form is submitted. In onFormSubmit, onTermSubmit is called with the term written in the box. By doing this, the term is passed up to the parent <App /> component. Voila! See the Github repository and App.js and SearchBar.js files to see this in action.

The project looks like the following image.

I then refactored the videos app from class-based components to React Hooks, the syntax which I definitely favour more! I have already had a little experience with Hooks from Neil Cummings’ course. The thing I’ve learned from Stephen Grider is when the function defined within the useEffect hook is called. Well, let me summarise:

useEffect(() => { return something }) // The function is called everytime a component re-renders.
useEffect(() => { return something }, []) // The function is called once the app first renders, like the componentDidMount()
useEffect(() => { return variable }, [variable]) // The function is called everytime the declared variable updates. The variable is a dependency for the function and can be more than one. If that's the case, every variable should be declared in the array.

I also learned how to make a custom hook. In this case, a useVideos hook is created. That hook takes one argument and returns an array of two variables. It uses useState and useEffect inside and work particularly like a function. Its purpose is to remove the video loading logic from <App /> component and become a reusable piece of code. So, if the app was much bigger, I could use useVideos anywhere else when I wanted to get videos from the API. Here take a look at the codes.

Next step: A streaming app

On Saturday, I started a much bigger project in Stephen Grider’s course. It resembles a streaming service like Twitch. It’s currently work-in-progress, so I would like to write about it next week. But this project include React Router, Google authentication, and redux-forms as new things for me. Well, in fact, I used React Router previously but I wasn’t introduced how it worked.

Anyways, I’ll try to do this kind of recap every weekend. I go a bit technical but I don’t provide tutorials here, so I’m publishing this series in Diary category. More to come in the following weeks, so stick around! Be seeing you.

Leave a Reply