Forem: William Bojczuk

Should you learn Linux shell commands as a web developer in 2023?

William Bojczuk — Wed, 03 May 2023 15:46:13 +0000

In this day and age there are nearly an infinite amount of tools that one person or the other is recommending to us as Web Developers.

Of course it would hurt no one to have another skill under their belt, but would it actually be useful?

There are definitely a few scenarios where this skill will serve you well. In my experience, this is especially true with PHP which is part of the LAMP stack (Linux Apache MySql PHP).

I know many developers discourage the use of PHP due to the unholy amount of diversity in the language because of it’s old age, and also performance-wise there are better alternatives. ☉ ‿ ⚆

Regardless of this, PHP is still used by ~78.9% of all websites that utilize a server-side language. Thus making PHP still quite a relevant topic.

But why would knowing Linux Shell Commands help with developing in PHP? Can’t I just learn the PHP versions of the commands?

I would argue that understanding what the PHP commands do to the underlying Linux system to achieve your desired result is a very good thing to know.

Not only because you will get a deeper understanding of commands commonly used in PHP but you’ll also be able to work in the Linux shell effectively when needed.

The syntax between the commands in PHP and the Linux Shell can be extremely similar. Take the following comparison, both instances achieve the same result:

# Removing a directory in PHP
rmdir('exampledir');

# Removing a directory in the Linux Shell
rmdir exampledir

But I don’t use PHP in my workflow… So is this skill useless?

NO, not by a long shot. In fact I recently set up a server/droplet to run NodeJS through Digital Ocean. I had to use Linux Shell Commands to navigate the files, edit files, and start the server’s service, and honestly knowing Shell Commands aided me tons.

Linux powers the majority of servers in the world.

The truth is, most of the services that allow you to host your websites, at the core are Linux. So if you ever need to interact with the underlying OS, knowing the commands to do so will save you quite a bit of time.

Conclusion

In the end, it really depends if you are going to utilize the skill and if you have time to learn it.

I personally just completed a course on the subject and find it useful when I need to code in PHP or set up a new droplet. You may not use Linux Shell Commands often, but when you have to, knowledge on the subject will serve you well.

That’s it for this post. I do hope this post helped with your decision of whether or not to learn Linux Shell Commands.

Let me know your thoughts and Happy Coding! ヽ༼ ຈل͜ຈ༼ ▀̿̿Ĺ̯̿̿▀̿ ̿༽Ɵ͆ل͜Ɵ͆ ༽ﾉ

Hey, I'm William Bojczuk.

For more tips, tricks and tutorials follow GrowInCode on YouTube or Instagram.

How React’s useEffect Hook Changed My Life

William Bojczuk — Fri, 14 Apr 2023 15:23:18 +0000

Oh my God, why can’t my JavaScript find my React Component. WhAt Am I DOiNg WronGGg!!!!?!?

Is probably something every developer starting out with React has said at some point. Luckily the creators of React gave us a hook to combat this.

Any code that alters a component after the component has been mounted is called a “side effect”. To accomplish this, us developers are left with the useEffect hook.

In the below example, we are attempting to replace the textContent of a paragraph element with new text. But with this setup, an error will be thrown and no changes will be made. WHY?

function Content(){

  document.getElementById("content").textContent = "New Text";

  return(
    <p id="content">Replace This Text</p>
  )
}

I’ll tell you why, components in React are still JavaScript objects until they have been mounted/rendered. In this example the statement to change the textContent of the paragraph is actually executed BEFORE the React Component has been returned, much less mounted.

So what can you do to access the component AFTER it’s been rendered to the DOM as HTML?

Now we come to it, the how. If we update our example to use the useEffect hook to get the job done, then it does what it sounds like, it gets the job done!

Now keep in mind that you DO NOT put your code directly into the useEffect function’s arguments. useEffect takes a function which is executed upon triggering. The simplest way for me is to pass an anonymous function containing all my JavaScript to the hook like in the example below. But you could include a named function instead.

function Content(){

  React.useEffect(()=>{
    document.getElementById("content").textContent = "New Text";
  }); 

  return(
    <p id="content">Replace This Text</p>
  )
}

Now Guess What? The code works and will now change the textContent of our paragraph to “New Text”.

What about async data????

If we have a value that we are fetching from an API. We kind of need to update the part of our application that relies on that data once we receive it right? RIGHT.

In the below example, I’ve altered our Content component to rely on some data from an API. Using useEffect, we define and use an async function to fetch our data and set the state of our text to the response text.

function Content(){

const [contentText, setContentText] =  React.useState("Replace This Text");

React.useEffect(()=>{
  getData();
  async function getData(){
    const fetchData = await fetch("https://urltoapi.com");
    const textData = await fetchData.text();
    setContentText(textData);
  }
}); 

  return(
    <p id="content">{contentText}</p>
  )
}

React does not allow for the function passed to useEffect to be asyncronous. So you have to define it INSIDE of the passed function and execute it there.

But William, my code runs every single time the component is updated and it’s breaking my code!

Yes, yes it does. This is by design. By default, useEffect is run every time the component needs to update. For those of us that need to limit this like when you’re developing a SPA (single page application) and you need to manually trigger useEffect at a certain time, luckily, again we are saved by the React creators.

useEffect takes a second optional argument. An array of dependency states/values. Whenever one of these state’s values changes is when the useEffect hook is re-triggered. Whether this be on the component updating or any time in between.

Below I’ve altered our Content component to trigger useEffect every time the “Trigger useEffect” button is clicked, which changes the triggerCount state, and that state is a value in the useEffect’s dependency array.

function Content(){

  const [triggerCount, setTriggerCount] = React.useState(1);

  function handleClick(){
    setTriggerCount((oldval) => ++oldval);
  }

  React.useEffect(()=>{
    console.log(`useEffect has been triggered ${triggerCount} time(s)!`);
  }, [triggerCount]);

  return(
    <button onClick={handleClick}>Trigger useEffect</button>
  )
}

But I only want it to trigger ONCEEE!!!

Well, if you give useEffect an empty array as the dependency array, the hook will only trigger once, and this is when the component has been mounted/rendered. This is because when you provide a dependency array, useEffect waits for one of those values to change before it re-triggers. But if you don’t provide any values, they cannot change, so it will not re-trigger.

So for those who learn visually, here’s an alteration of the first example where useEffect only triggers once.

function Content(){

  React.useEffect(()=>{
    document.getElementById("content").textContent = "New Text";
  }, []); 

  return(
    <p id="content">Replace This Text</p>
  )
}

So that’s it for this article. I really hope you learned something new and enjoyed it in the process. I did spend a bit of time writing this so if you did enjoy reading it, let me know :D.

For more tips, tricks and tutorials follow me on YouTube or Instagram.

The right ways to accept optional parameters in JavaScript.

William Bojczuk — Tue, 11 Apr 2023 15:42:29 +0000

If you’ve worked in any coding scripting language, changes are you’ve created a function that takes values from users. But sometimes these values should be optional, for example a parameter that specifies settings for the function.

Single Value Parameters.

Let’s say you have a function that takes two numbers, adds them together and returns the result. The code would look something like this.

function addTwoNumbers(a, b){
  return a + b
}

We know that calling the function like addTwoNumbers(1, 2); would result in “3" being returned. But what if we call the function without any parameters like so: addTwoNumbers(); ? Well I’ll tell you, you’ll get “NaN” or “Not a Number”. Let’s say our application requires a numerical value be returned, we can mitigate this error by setting defaults to the parameters. If we alter the function above to look like this:

function addTwoNumbers(a = 0, b = 0){
  return a + b
}

Then if we call the function without arguments, now the function returns “0” instead of “NaN”. So to put it simply, to set a parameter’s default value, simply add “= val” in the function definition where you accept the parameters.

Objects or Arrays.

For some applications, setting a default value for the whole parameter’s value will work. But let’s say we have function that applies a bunch of styles to an element from a parameter named “elemStyles” which is an object like so:

function elementStyles(elem, elemStyles= {color: "red", backgroundColor: "black"}){
  for(property in settings){
    elem.style[property] = elemStyles[property];
  }
}

If we set up the function like that and then pass {color: “green”}as the “elemStyles” parameter, then the “backgroundColor” default setting will be removed since the whole "elemStyles" object would be replaced by the passed value.

We can fix this by altering the function to look like this:

function elementStyles(elem, elemStyles){

  const currentStyles ={
    color: "red",
    backgroundColor: "black",
    ...elemStyles
  }

  for(property in currentStyles){
    elem.style[property] = currentStyles[property];
  }
}

Now the default settings for the object are defined in “currentStyles” and any properties set by the user will simply overwrite the default properties.

Let me know some methods you use for these functions. Happy Coding everyone!

Thanks for reading! For more tips, tricks and tutorials follow me on YouTube or Instagram.

Make sure and leave a comment if you want to see me cover something specific.

This is the best way to compress images on a website.

William Bojczuk — Mon, 10 Apr 2023 19:16:28 +0000

Any website or app that allows users to upload their own photos needs to have a compression system in place. Which one should I use? I tried out different packages so you wouldn’t have to.

Why do you need a compression system?

The real question is, why wouldn’t you? Due to improvements in camera quality comes larger photo sizes. I saw this firsthand in my latest project that allows a user to upload images to their blog. During tests, I realized that from an IPhone 14, photos could easily reach 8 to 11 Megabytes. That’s massive, and too big to be serving to visitors on a website. A compression system can
take your photo and reduce the quality within a certain threshold as well as apply image dimension restraints to save that precious storage.

How you can implement this system.

I tried a few different frameworks and came to the conclusion that this one was the easiest to use and provided the desired settings. Image Resize Compress can be installed through NPM if you’re familiar with it npm i image-resize-compress, or you can simply include the package’s CDN to use the script <script src=”https://cdn.jsdelivr.net/npm/image-resize-compress@1/dist/index.js"></script>. The settings are really straightforward so I wrote up a quick function for you to get started quickly.

async function compressImage(image, settings){
    const curSettings = {
        quality: 75,
        width: "auto",
        height: "auto",
        format: "jpg",
        ...settings
    }
    const compressRes = await fromBlob(image, curSettings.quality, curSettings.width, curSettings.height, curSettings.format);
    return compressRes;
}


// Using The Function
compressImage(file, {quality: 80, height: 720})
.then((res)=>{
    const compressedImage = res;
})

You simply call the function with the input image as the first parameter, and then any settings you want to alter as an object in the second parameter. The default quality is 75, or 75%. the height and width settings are set to auto meaning that the original dimensions will be used, and the default format is jpg but webp, png, bmp, and _gif_are also available.

You do have to keep in mind that this function returns a Promise. Which is why I used .then() to access the resolution (aka the data).

This package is really easy to use and allows you to not only compress the image but to also resize extremely large images to preset dimensions. If you want to learn more about the package, check out its documentation here.

Thanks for reading! For more tips, tricks and tutorials follow me on YouTube or Instagram.

Make sure and leave a comment if you want to see me cover something specific.

Thumbnail: https://freeicons.io/profile/6156