DEV Community: Duzmath Lajos

Advice needed

Duzmath Lajos — Thu, 29 Feb 2024 17:23:54 +0000

Hello Everyone!

I do not know, if this is the appropriate forum or site to ask my questions, but I am a bit lost.

Right now, I am working as a Jira / Atlassian developer at a company, which means, that I am coding quite a lot in Adaptavist Scriptrunner addon's built-in coding features. (Scripted post-functions, scripted listeners, scripted fields etc.)

The language the addon uses is Groovy, which is similar to Java, as some of you might know.
I feel like I am doing well in my job, also I love doing coding during my job.
That is the reason, that in the future I want to step up one level in coding, and not be a Jira / Atlassian developer, but work as a normal developer.

During the 2020-2021 pandemic, I was doing quite a lot of frontend coding, so I had a mediocre knowledge in HTML, CSS, SASS, Vanilla JS. I really liked that part, I even managed to recreate a boardgame I had, in plain HTML, CSS, VanillaJS.
Until the realisation struck, that VanillaJS is not a viable career option anymore.
I started learning React, then Angular...and they were overwhelming.
I gave some tries to both of them, but I couldn't get the hang of none of them. They were overwhelming, and I am totally unable to understand those frameworks/libraries, and unfortunately, that's a fact. They are not for me.

So, right now, here I am, loving frontend development, not understanding the currently popping frameworks and libraries, and wanting to be a full time "coder"/developer.

And the question here is, what are my options in your opinion?
Any advice is kindly appreciated.

Thanks in advance for your feedback!

VanillaJS or Frameworks/Libraries (React)?

Duzmath Lajos — Thu, 11 Feb 2021 08:05:28 +0000

Hello Everyone!

For the last couple of weeks, I have a big dilemma. I really don't know, if I should stick with VanillaJS or focus on learning React.

The reason behind this (these are all personal and from my points of view):

VanillaJS

Pros:

Easier to write and more logical
Seems more usable for me, for some reason
Lot of easy/intermediate projects for learning
More enjoyable to write
More experience of success

Cons:

Feels like I will never really use this if I land a job
Less maintainable
Not really an up-to-date knowledge

React

Pros:

Widely used in the industry
Component based architecture is easier to maintain

Cons:

Really hard to find REAL beginner projects (feel like a Tic-Tac-Toe game or a To-Do list is not beginner friendly, because you cannot figure it out alone) Therefore the next point:
Less experience of success
Hard to understand the basics
Seems like you MUST use a CSS framework for it (but Tailwind and/or Bootstrap is really not my cup of tea)

Also, the biggest fear of mine, that I will forget the VanillaJS, while I dig into React...yes, this might be the biggest fear in the story for me.

I am really looking forward onto some encouraging on both of the topics.

Thank you in advance for your kind help and assistance.

What are the most important skills to master (outside of coding) which will help you to land a job?

Duzmath Lajos — Fri, 22 Jan 2021 14:30:17 +0000

Hello Everyone!

So, I was just thinking that what are these skills, which are really important, outside of knowing how to code.
I mean e.g.: Git, GitHub etc.

Could you please suggest some stuff to learn before I start applying jobs?

I know, that the lack of working in a team will be the hardest part, because I know how to code myself, but I will have no experience, how to code together with someone else or a team.

Thank you in advance for your suggestions.

Have a nice day!

Learning React

Duzmath Lajos — Sun, 17 Jan 2021 15:57:46 +0000

I have started learning React yesterday.
I have put into that like 10 hours, since yesterday morning, but I feel like, I have ZERO clue what is going on.

I would like to kindly ask you fellow developers, to send me sources where I can understand the basics of this library.
Brad Traversy's course was waaaaay to much and I had to leave the 2 hours video at the half of it, because there was too much going on.
I am now doing Dev Ed's Todo list app but it's also too much and every one of these tutorials are too fast for a beginner like me.

I feel like I have kind of good understanding of Vanilla JS, but React is a totally different cup of tea.

Please help me :(

Thank you in advance!

Border Radius Generator Tool (VanillaJS)

Duzmath Lajos — Sat, 02 Jan 2021 19:07:13 +0000

#**Hello Everyone!**

So, today I have decided to create a Border Radius Generator Tool, which is an existing stuff already, but I just wanted to create one, for the sake of practice.

This is not an in-depth tutorial for that, just a quick recap, what I did and why.
The main focus was to practice the range input type, since I haven't used it yet.

#HTML

For the HTML, I have created 4 range inputs, because the border-radius property has 4 values.

"Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)."

![Four values](https://dev-to-uploads.s3.amazonaws.com/i/mm15ecivzqcauduf6oed.jpg) [Source of the previous quote](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)

And also added one square, which will be modified by the sliders on the range inputs.

<div id="container">
    <h2>BORDER RADIUS GENERATOR</h2>
    <div class="slider-container">
      <label for="topLeftSlider">Top Left</label>
      <input type="range" min="0" max="100" value="0" class="slider" id="topLeftSlider">
    </div>

    <!-- Put the middle section in one DIV -->

    <div id="left-box-right">
      <div class="slider-container bottom-left">
        <label for="bottomLeftSlider">Bottom Left</label>
        <input type="range" min="0" max="100" value="0" class="slider" id="bottomLeftSlider">
      </div>

      <div id="box"></div>

      <div class="slider-container top-right">
        <label for="topRightSlider">Top Right</label>
        <input type="range" min="0" max="100" value="0" class="slider" id="topRightSlider">
      </div>
    </div>

    <!-- Put the middle section in one DIV -->

    <div class="slider-container">
      <input type="range" min="0" max="100" value="0" class="slider" id="bottomRightSlider">
      <label for="bottomRightSlider">Bottom Right</label>
    </div>
    <textarea name="css-code" id="css-code" cols="30" rows="5">border-radius: 0% 0% 0% 0%;</textarea>
    <button id="copyCss" class="btn">Copy CSS</button>
    <button id="reset" class="btn">Reset</button>
  </div>

You might ask, WTF is this?

<div id="left-box-right">

Actually, I did this, because I am a lazy douchebag and wanted to get flexbox working here, with the default flex-direction, in order to get the inputs and the box next to each other.
Sorry, not sorry. 😁

Also, you might notice, that on the bottom of the code, there is one textarea and also 2 buttons.

    <textarea name="css-code" id="css-code" cols="30" rows="5">border-radius: 0% 0% 0% 0%;</textarea>
    <button id="copyCss" class="btn">Copy CSS</button>
    <button id="reset" class="btn">Reset</button>

The textarea will contain the values of the range inputs in a certain way, which will be:

border-radius: 0% 0% 0% 0%;

The reason behind that is, that I want to be able to copy the values that I have done with the range inputs (let's call them sliders).

The buttons below them are Copy CSS and Reset.

The Copy CSS will be doing, what is written on the button (what a surprise).
The Reset button, will reset the values of the sliders, the textarea and the shape of the box.

#CSS

For the CSS part, I don't want to copy the whole code here, so I will just mention the important parts.

Firstly, I rotated the two sliders on the left and the right side of the box, with the following:

.bottom-left {
  transform: rotate(-90deg);
}

.top-right {
  transform: rotate(90deg);
}

This resulted in the following:

![Sliders](https://dev-to-uploads.s3.amazonaws.com/i/4vx3tja4vbgxku1qk65v.jpg)

Which might also be interesting for you, is the sliders' design:
It can be found here.

That's all about the CSS part.

Now let's go to the interesting stuff. ➡

#JavaScript

I have defined all the needed stuff:

const topLeftSlider = document.querySelector("#topLeftSlider");
const topRightSlider = document.querySelector("#topRightSlider");
const bottomRightSlider = document.querySelector("#bottomRightSlider");
const bottomLeftSlider = document.querySelector("#bottomLeftSlider");
const box = document.querySelector("#box");
const sliders = document.querySelectorAll(".slider");
const cssCode = document.querySelector("#css-code");
const resetBtn = document.querySelector("#reset");
const copyCss = document.querySelector("#copyCss");

You might notice, that I defined each slider individually and also by their classname: .slider.

The reason behind that is, that I wanted to use a forEach method, for the sake of practicing it, on the eventListener.

sliders.forEach(slider => {
    // TO EACH CLICKED SLIDER, ADD "INPUT" EVENETLISTENER
    slider.addEventListener("input", () => {
        // TARGET EACH OF THE RADIUS PROPERTY OF THE BOX AND PUSH THE VALUE OF THE SLIDER INTO THAT
        box.style.borderTopLeftRadius = topLeftSlider.value + "%";
        box.style.borderTopRightRadius = topRightSlider.value + "%";
        box.style.borderBottomRightRadius = bottomRightSlider.value + "%";
        box.style.borderBottomLeftRadius = bottomLeftSlider.value + "%";
        // PUSH THE VALUES ALSO INTO THE COPIABLE TEXT OF THE TEXTAREA
        cssCode.textContent = `border-radius: ${topLeftSlider.value}% ${topRightSlider.value}% ${bottomRightSlider.value}% ${bottomLeftSlider.value}%;
        `
    })
})

The reason I used the "input" eventListener is because it updates the box's properties dinamically.

After this, the tool was working:

When I finished jumping around of happinness, I moved onto the textarea and the buttons.

The Copy CSS button is doing the following:

copyCss.addEventListener("click", () => {
    cssCode.select();
    document.execCommand("copy");
})

Targets the value in the textarea and copies the content of it to the clipboard.

Now, there is only one thing left, the reset button:

resetBtn.addEventListener("click", () => {
    // RESET THE VALUE OF EACH SLIDER
    topLeftSlider.value = 0;
    topRightSlider.value = 0;
    bottomRightSlider.value = 0;
    bottomLeftSlider.value = 0;
    // RESET THE BOX'S BORDER RADIUS
    box.style.borderRadius = "0 0 0 0"
    // AFTER RESETING THE SLIDER VALUES, PUSH THAT INTO THE TEXTAREA
    cssCode.textContent = `border-radius: ${topLeftSlider.value}% ${topRightSlider.value}% ${bottomRightSlider.value}% ${bottomLeftSlider.value}%;`
})

#Remarks

The time spent in this project with the HTML, CSS and JS, was roughly 1 hour.

Here you can find the GitHub repo.

Here you can test the tool if you want to.

The tool had been created for PC, this is not responsive at all, yet.

If you have any tip, suggestion, remark, feel free to contact me anywhere.

Have a nice day and rest of weekend everyone!

Rock-Paper-Scissors Game

Duzmath Lajos — Wed, 16 Dec 2020 21:38:26 +0000

Hello Everyone,

...who might read this.

First of all, I would like to mention that English is not my native language, so sorry for the grammar mistakes in advance.

So, I have just created this game in the previous 2-3 hours from scratch and decided to write some notes about that and also ask for the community's opinion.

The game can be reached via this link.

Regarding the (JS) building process:

Firstly, I created an object, which contains the text format of each possibility (rock,paper,scissors) and then added the image sources also to this object.

In my HTML I have made:
playerChoiceImg
playerChoiceTxt
computerChoiceImg
computerChoiceTxt

to be able to modify the content in each of them.

Then created a points variable, which will store the points of each player (player and computer).

After that, I needed a random generated number between 1 and 3 which will be indicating the computers choice.

To be honest, I gave these objects an ID, but havent used them in the project. I just used the index of each at the selection. Like: choices[0].image...

Adding the eventListener:

I have attached and eventlistener to the buttons, with the forEach() method, which I am learning to use properly nowadays.
This eventlistener will do most of the work.

As your can see on this screenshot, I am using if-else statements, to define, which button does what and according to the textContent of the button.

Here I would like to ask, if you have any suggestion regarding this solution? (1st question. I will be indicating a number at each question, so it will be easier to answer, if you want to)

** Now, let's go back to the explanation. **

So, the if-else statements:

If the button has the text "Rock" in itself, then please show "Rock" in the playerChoiceTxt and meanwhile change the image source of playerChoiceImg to the one stored in the object.
And the same for the other 2 options.

After that, I crated the computer's choice function, which looks the following:
(2nd question) Is there a proper way to paste code here with the original formatting?

Some explanation regarding that (because it's a little bit spaghetti):
1. I have created a looping gif from the 3 images I use for the rock, paper and scissors options.
This is kind of a workaround solution for not knowing how to do this in the code.

(3rd question) Any suggestions how should I loop through images and create a GIF like animation?

2. Then added a setTimeout, which is responsible for the duration of the animation.

3. Inside that, I told the function, to create a random number between 0-2, which are the element numbers in the choices object.
This will indicate the choice of the computer.

4. Changed the text and the image content to the chosen object element's name and image source.

5. Then ran the gameRules() function (which we will talk about later).

6. Updated the textContent of each player's point indicator.

7. Checking the points at each function call, to check if somebody won. (whoWon() function)

function gameRules()

This is what I am not really proud of.

So basically, this function checks the player's choice and checks if the computer choice can beat it or not.
I have set up these if-else statements according to the game's rules. If the computer won, add +1 to the computer's points, and at any other results, add +1 to the player's points.

(4th question) Is there an easier way? Any suggestion would come in handy.

function whoWon()

if-else statements again..and again..and again...

So basically, just checks the point array if anyone has already reached 10 points, and if so, then resets the points to their initial value.

Huhh..that's all, I guess..
This was my first post here, hopefully not the last, because it was a really enjoyable activity and language practice.

If you have any question/suggestion/remark, feel free to contact me.

Also, here is the GitHub repo, if you are interested in the source code:
https://github.com/crabyke/rock-paper-scissors

Bye everyone!