DEV Community: welschmoor

My first 2 months working as a programmer

welschmoor — Sun, 03 Jul 2022 09:29:37 +0000

This won’t be a long and tiring post that are known to exist throughout the internet, but more of a summary of what I have learned in the first two months of my developer journey.

Before May 1st, 2022 I have never worked as a programmer, having learned the craft for 1 year I was able to find a job. Right upfront I want to mention that I do not know how easy or how hard it is to find one without a degree or working experience, all I can say is that I have found one (and possibly more, because many of my interviews went well). But this is for another story. Here I only want to depict the first two months.

What I can feel right away is that my ability to read code has improved dramatically. I can look at a thinly written code of a two thirds of a page length and instantly (a few seconds alright) know what it does. Because the code bases one works with when employed are much much bigger than what I was used to in my personal projects, and the tasks always require you to read and change that code base, it was from day one my fate to having to read code other people wrote and I can tell you, it’s not easy. It’s not easy reading someone else’s code a year after you have started out, but two months into work I can read anything just fine!

Another noticeable improvement is code quality. I used to pay no attention to duplicating small chunks of code. user.type === “registeredUser” would previously be used over and over again instead of saving it to a variable and using that variable instead, hence avoiding typos in one of the instances, reducing bugs and also the computer’s calculating time. In fact, for reasons of readability I hated doing it. Abstracting code into functions or saving it into variables decreases readability of code and readability was more important for me as a beginner. Comments by other developers with more experience were of great help to further improving my code. This is a very unique experience that you cannot get by simply doing your online courses.

These two things, the ability to read and navigate through code quickly, and the code quality is what improved dramatically.

As a downside, albeit how small and insignificant when compared to the upside of actually working, is that learning new things has now become difficult, as the time for it is just not there. So, if you’re not yet working, use all the time you have for learning new things. If you are learning, say, frontend, then learn everything you can, the whole eco system of your chosen path. On the website roadmap.sh you can see the eco system of your particular path. The website was shown to me by my employer and to my surprise I did most of the things on there.

For those interested, I can write out the entire path and all the tutorials I have taken to becoming an employable programmer in 2022.

Optimistic UI with GraphQL in Apollo

welschmoor — Thu, 10 Feb 2022 01:08:02 +0000

A short guide on how to update the UI before the mutation.

On a typical website when you click a button, such as the like button or the follow button, it usually takes a noticeable amount of time for the change to register. It makes the app slow and unresponsive. So, how do we design the app in such a way that it updates the UI instantly?

There are many ways, such as the optimistic response mutation. But if the mutation resolver does not send you back the thing that you have updated, you're out of luck (unless you know something I don't). So, if you can't use Apollos optimistic ui for some reason, this is the guide for you.

I've only been programming for 10 months, so take everything with caution. But here's a way of how I made my UI blazingly fast.

THE FIRST WAY
The first way is for times when there are no lists. Instead of using data from Apollo's cache { data } = useQuery(), we create a state and use that instead. When we for example click a Like button, we update that state and instantly render the result on to the screen without waiting for the server to respond. To keep the data in sync, we use the onCompleted property from the query. A short guide:

(1) Create useStates. One for the case that you have already liked the picture and one for the count of all likes for a given post or photo.

  const [isLikedByMeST, setIsLikedByMeST] = useState(false)
  const [numberOfLikes, setNumberOfLikes] = useState(0)

(2) Use the onCompleted function of the useQuery to set this state to whatever is in the DB

  const { loading, data } = useQuery(SEE_PIC, {
    variables: { seePhotoId: Number(id) },
    onCompleted: (completedData) => {
      setIsLikedByMeST(completedData.seePhoto.isLikedByMe)
      setNumberOfLikes(completedData.seePhoto.likes)
    }
  })

(3) Increase the number of likes directly per setState. I use letter p to indicate the previous state. Since it's a Boolean, we return the opposite after a click: !p

  const likeHandler = async (id) => {
    setIsLikedByMeST(p => !p)
    setNumberOfLikes(p => {
      if (isLikedByMeST) {
        return p - 1
      }
      return p + 1
    })
    await toggleLike({ variables: { id: id } })
  }

(4) Use this new state to show in the UI instead of the data from cache.

<Likes >
  {numberOfLikes === 1 ? "1 like" : `${numberOfLikes} likes`} 
</Likes>

Now after every mouse click on that like button the UI is updated instantly.

THE SECOND WAY
This is the easiest way: When you don't have a list, you can use the {loading} property of the query to update the UI. Instead of waiting for UI to change you change it right as loading becomes true. The idea came to me as I was watching this video by Ryan Florence.

const [toggleLike, { loading: likeLoading }] = useMutation(TOGGLE_LIKE, { //...

As likeLoading becomes true, simply register the like on to UI aaaand you're done!

THE THIRD WAY (for lists)
Now we will have to do more work. We can't use {loading} in a list, because that would update EVERY item in our list and your UI will flare up with changes for all items even though you have only liked one.

Here we will fetch all users and see if we follow them or not. We want to be able to click on the follow button and see UI change instantly without waiting for server to respond.

(1) Create a state array where we will store the information we need

  const [fastUpdateST, setFastUpdateST] = useState([])

(2) Use onCompleted to populate our state with necessary information: The ID of the user and the Boolean if we follow them or not. The fastUpdateST becomes an array of objects where we associate the id from the users list with the property isFollowing: [{id: 5, isFollowing: true}, {id: 6, isFollowing: false}, ... ]

  const { data: allUsersData, loading: loadingData } = useQuery(SHOW_ALL_USERS, {
    variables: { limit: 10 }, // show only 10 users
    fetchPolicy: "cache-and-network",
    nextFetchPolicy: "cache-and-network",
    onCompleted: completedData => {
      setFastUpdateST(
        allUsersData.showAllUsers.map(e => {
          return { id: e.id, isFollowing: e.isFollowing }
        })
      )
    }
  })

(3) Let's handle follow - the button handler for the follow button - where we first update the UI and only then do the mutation. newState is simply like the old state, but the Boolean isFollowing for that particular user is the !opposite

  const followUserHadler = async (username, userid) => {
    setFastUpdateST(p => {
      const newState = [...p.filter(e => e.id !== userid), { id: userid, isFollowing: !p.find(e => e.id === userid).isFollowing }]
      return newState
    })

    await followUser({
      variables: { username: username },      
    })
  }

(4) And here's the JSX where we conditionally render either a checkmark (that we already follow the user) or the word follow, if we yet don't. All this code below is inside a .map(e => e.id .... and runs for every item in a list of users.
I use the letter e to mean each. So, we render the isFollowing Boolean from fastUpdate state and not from cache data!

I also added the { loading: followLoading } from both useMutations to temporarily disable the follow button while it is loading to avoid quick, accidental double clicks.

                  <FollowBTN disabled={unfollowLoading || followLoading} onClick={e.isFollowing ? () => unfollowUserHadler(e.username, e.id) : () => followUserHadler(e.username, e.id)}>
                    {fastUpdateST.length > 0 && fastUpdateST.find(each => each.id === e.id).isFollowing ? <CheckMarkIcon /> : "Follow"}
                  </FollowBTN>

Congratulations! Your app is now as fast as a desktop app. If you know a better way of achieving that, please let me know!

The full code can be seen here: CLICK

Instagram Clone

welschmoor — Sat, 29 Jan 2022 23:10:52 +0000

(if you see the picture either squeezed or stretched, it's because dev.to did not implement it correctly for some browser widths. Bold text with **** does not work either, I hope dev.to will fix it.)

Link to the fully working app:
instopound.herokuapp.com

Meet Instapound - Instagram for those who don't know the metric system! What's a gram? How much is a gram?

If you keep asking yourself those questions, do not worry! We got you covered! No more grams, no more kilograms. At Instapound we convert grams to ounces, pounds to kilograms!

I've been working on an instagram clone for 4 weeks using:

GraphQL
Prisma for Postgres
React
Apollo-Express
styled-components

Implemented functionality:

Upload photos
Like a photo
Comment on a photo
Follow a user
Personal feed

Search functionality still needs to be implemented (easy to do).

I wanted to call it Instaounce, but the word is hard to read and InstaOunce didn't look good aesthetically. So, Instapound it is!

Currently building a YouTube Clone

welschmoor — Sun, 19 Dec 2021 01:22:11 +0000

...building and learning alot. So far I have only implemented a rough layout, with the opening sidebar (click on Hamburder button).

Progress link as of 28 Dec 21: CLICK (same link as before)
Progress link as of 19 Dec 21: CLICK
Progress link as of 02 Dec 21: CLICK

This was the first time using linux, which took quite a while to set up.

Also, dear dev.to, stop using rounded corners on images, not only is it ugly, it makes zero sense cropping parts of an image.

The Dangers of Coffee... and Bitcoin

welschmoor — Tue, 23 Nov 2021 01:25:57 +0000

I am someone who questions everyday things. We wake up, drink coffee, go to school/work, go to a park, a movie, some choose to buy cigarettes and smoke, but why? Do you question things?

If you do, you'd be surprised to find out that many of the things we do are not only bad, they are quite dangerous.

You most likely drink coffee. Did you ask yourself why? Is it because everyone else does it? Is it because you like it? Did you ask yourself, whether you could do without it?

I did ask myself that question and here's what I have found. Let's describe what happens when you drink coffee:

As you buy coffee, you increase the demand for it, which means prices for coffee grow. A Brazilian farmer sees that the demand for coffee grows and what does he do to meet this demand? He chops down the rainforest and creates new coffee plantations. Rare animals and plants are going extinct just because you need a differently flavored water - a flavor which by the way can break your sleep pattern which in itself is bad for health. A very valuable and irreplaceable genetic information is lost, something truly unique that took billions of years to form is lost due to something so imbecile.

The plantations are treated with polluting chemicals, the coffee beans are collected and hauled to ports in large, polluting trucks, from which they are transported in large, stinking ships from Brazil to North America and Europe. These big ships use as much fuel per day as tens of thousands of cars, so, you buying coffee increases the demand for fuel and hence the fuel prices grow and higher prices - as you can guess - are followed by more oil drilling with devastating consequences for life on this planet. Also, with higher fuel prices your daily commute becomes more expensive because you drink coffee. Not to mention the pollution from those ships is huge, all of that just because you wanted your water to taste differently. But we're not done yet.

Once the ship arrives, the coffee has to be transported to a roastery, where it is roasted, again, under the expenditure of energy. That's even more unnecessary, avoidable pollution. Then, with the use of plastics, which again makes other plastic you use on daily basis more expensive and also now there's more of it in the world, the coffee is packaged and transported to a store or a coffee shop. At home or in a café, the coffee is going to be brewed, again under the expenditure of energy with all the same consequences described above.

Now you're finally allowed to drink it.

Don't you think that's a bit too much pollution and loss of animal/insect and plant live for having a flavored water?

Understand, that drinking coffee is one of the most horrendous things you could do. If we are to make it as humans on this planet, we need to become efficient and stop being wasteful. Giving up coffee and many other unnecessary activities (such as smoking) is a step in the right direction.

Bitcoin

And we finally arrive at Bitcoin, which they call a crypto currency even though it's a crypto commodity, because its price behaves like a commodity.

How bad is Bitcoin and why do you use it? A similar question that we have just asked ourselves about coffee.

Understand that mining bitcoin is nothing but setting coal on fire and watching a digital counter go up. That's it. Mining bitcoin uses as much energy as the entire Banking system of Europe, with absolutely no benefit to our society. We are taking coal - because Bitcoins are mostly mined where electricity is cheap and that's all coal - we set it on fire, turn it into energy and we create bits and bytes that have absolutely no use or value for a society.

As of today, it's not recommended to eat fish more than twice a week. This is because the oceans and rivers are so polluted, that fish who live there have a high concentration of a toxic element called mercury, which itself is a product of coal burning. Not only that, coal mining is extremely devastating for nature. Entire forests disappear and become a large, worthless pits of sand.

Understand, that mining, using or investing in bitcoin is extremely bad and has absolutely no benefit to humanity whatsoever.

But that's not everything. It's not just no benefit, it's outright danger: Mining bitcoin increases demand for electricity, which means your phones, TVs, stoves at home become more expensive to operate, because they also use electricity that now becomes more expensive than if Bitcoin didn't exist.

That's not all. I am about to make the most important point about the danger of Bitcoin and other Crypto nonsense, but for this, we'll take a detour of one or two paragraphs.

Imagine a world, in which only one object exists. Let's say a kitchen knife and nothing else. Let's add a $100 bill to this world. So now our world has two objects in it. A kitchen knife and a $100 bill.

Question: How much does the knife cost? Can you answer this simple economics question? Well, obviously it costs $100, as the money simply reflects all the valuable things in the world. Now, let's add another $100 into our world, where we now have a kitchen knife and $200. How much is the kitchen knife worth now? $200! (The same happens when governments print money, the prices grow, which is known as inflation)

What does it mean for bitcoin? If bitcoin is accepted as money, it simply means there's more money in circulation in our world, which means all products in stores, everything imaginable including electricity, milk, bread, cars go up in price.

Everything in the stores goes up in price. The only people benefitting from it are the richest individuals on the planet as the inflation will result in higher stock prices. Politicians being friends with them is the reason there is very little action on crypto. The rich are very smart, they know what benefits them so they act accordingly.

Understand that if we are to survive on this planet and to eventually make it out into space, we need to get rid of inefficiencies like coffee and bitcoin as they are a huge burden on that goal.

The destruction of nature, the disappearance of valuable genetic information (the forests that disappear under brown coal mines are worth thousands times for our survival than whatever we get from that coal (like Bitcoin), and all other misery created by a mostly blind acceptance of everyday things has in the past and will in the future get us into trouble over and over.

Question everything and adjust accordingly. Make the right and efficient choices, be active and share your opinion about dangers of things. Reject things that introduce inefficiency into our society. Question everything. Question everything.

7 and a half months into coding

welschmoor — Tue, 23 Nov 2021 00:17:24 +0000

This is a quick overview of what I have learned in the past 7 months. Important to mentioned is that I am doing it full time, every day including on weekends, so your mileage may vary.

I started coding on April 5. 2021. I know the day, because I looked at my browsing history. In May 2021 I did not know the difference between Java and JavaScript, so I was new to coding, as new as one can be, with no knowledge of variables, functions or lists.

I started with python, which is a great beginner language as you don't have to deal with pointers or callbacks much, and a clean syntax. I took the CS50x, MIT 6.00.1x, Rice University's Interactive Python courses, the latter being the better one of the three. With Python I've build simple programs like a pin pong game or a memory game.

The end of July and part of August were spent mostly on CSS, in August I finally dived into JavaScript and learned it through September. In September I started toying with React, which was my subject-to-learn in October and November.

In November, in addition to React, I learned Node.js with MongoDB, how to build simple controllers with functionalities that allow posting, fetching and changing items in the database.

As of November, I can confidently build a fullstack application using the MERN stack - a stack which I would recommend to any beginner. MERN stands for Mongo, Express, React, Node and it's one of the easiest yet powerful choices one can make to build web application. Ben Awad (see him on YouTube) does amazing things with React and he uses as similar stack with the difference of using a Postgress SQL for database.

Along the way I have also learned Django and a bit of Go. I was blown away by the sheer speed Go offers. Using goquery I have build a scraper that scrapes listings for used items, and it's much much faster than say Python's Scrapy.

For the next few months I plan on finally building larger applications for a portfolio, because as of right now I only have simple landing pages, calculators, to-do apps, weather apps and simple games, which even to me are not very impressive.

I have Youtube, Instagram and Twitter clones lined up. These projects will allow me to learn user authentication, registration, something I haven't yet done and will give me the overall experience of building a larger app.

I have other weak points such as git. I also known very little about creating images with Docker, I know very little about Gatsby or NextJS, but for me they have not been to different from React. I have build a couple of things in both. So, those two React frameworks are also on my list to learn. Redux is also on the list, as I might need it for a larger project.

I have never learned to much in such a short period of time in my life. I have probably sunk 1600 hours into coding as of November 23., 2021!