DEV Community: Batuhan

I got my first job! (As a Junior Front End Developer)

Batuhan — Tue, 18 Feb 2020 06:18:12 +0000

Hey all! It's been a long time since i wrote here. I was working on to get a Junior Front End Developer job and it went well. I got it.

It got 3 interviews to take it. The first interview was with Human Resources Department and at the same day i gave the the technical interview too. After one week they invited me for another meeting. It was an interview both about company policy and a little bit more technical knowledge.

What i did to get this job?

I made sure that i have a good, clean and creative resume.

Made my website to show some of my skills(Also it is deeply needed just because you are a developer. More than showing off your skills i see a personal website as a digital ID we own.).

Filled my codepen by challenging myself with 100 Days CSS Challenge.

Tried to expand my network in LinkedIn.

Read many articles in dev.to (and still reading) to get a little bit more understanding of what i am trying to learn. Thanks to community there are so many articles to read <3.

What courses did i take?

1) Build Responsive Real World Websites with HTML5 and CSS3

2) Web Design for Web Developers: Build Beautiful Websites!

3) Advanced CSS and Sass: Flexbox, Grid, Animations and More!

4) The Complete JavaScript Course 2020: Build Real Projects!

This man is a life saver, for real. If you want to be a Front End Developer and start somewhere this can be your walkthrough.

If you struggle to start, just go for it. Buy these courses and once you start to watch, you will see in a lesson or two you are going to love it.

Custom Cursor with CSS and jQuery [Detailed]

Batuhan — Tue, 21 Jan 2020 16:49:54 +0000

Hey everyone! 2 days ago i posted I Built My Personal Website and one of the questions was What library did you use for the mouse pointer effect?. The answer is i used no library. I did it all by myself and today i am going to show you how i did it.

First things first, we have to create our custom cursor style.

Cursor Style

 .cursor{
   position: fixed;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #f5f5f5;
   pointer-events: none;
   mix-blend-mode: difference;
   z-index: 999;

   transition: transform 0.2s;
 }

Why do we use?

position: fixed;

It is because when we start to scroll we don't want our custom cursor to stay where we start to scroll. If you use position: absolute instead of fixed, cursor won't be moving as you scroll down or up the page. To prevent that you have to give the fixed value to position.

Why do we use?

pointer-events: none;

Your cursor is right on top of the custom cursor you created. And whenever you want to click a link or see a hover statement this custom cursor will prevent that to be happen. If you give the none value to pointer-events you will be able to click anything you want.

What is...

mix-blend-mode: difference;

The mix-blend-mode property defines how an element’s content should blend with its background.

difference: this subtracts the darker of the two colors from the lightest color.

And so this allows you to see the content behind your cursor easily.

jQuery DOM Manipulation

It is time to use some jQuery to make our

<div class="cursor"></div>

element follow the default cursor.

$(document).ready(function(){
 var cursor = $('.cursor');
});

Instead of writing $('.cursor') everytime and to make our job easier we stored it in a variable named cursor. Now let's make it follow as we move the mouse.

$(document).ready(function(){
 var cursor = $('.cursor');

 $(window).mousemove(function(e) {
        cursor.css({
            top: e.clientY - cursor.height() / 2,
            left: e.clientX - cursor.width() / 2
        });
    });
});

We selected our window object and when we move our mouse in it we want our cursor's top and left positions to change. To make it happen we manipulate its css from here.

What is...

top: e.clientY
left: e.clientX

clientY and clientX are relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.

pageY and pageX are relative to the top left of the fully rendered content area in the browser. This reference point is below the URL bar and back button in the upper left.

And by using clientY instead of pageY we maintain our custom cursor to stay at the same position.

As you can see, to keep our custom cursor in the right position we have to give both

position: fixed;

(in css)
and

top: e.clientY
left: e.clientX

(in jQuery)
properties.

Why do we add...

top: e.clientY - cursor.height() / 2
left: e.clientX - cursor.width() / 2

Because we want the cursor we created to be perfectly centered to our default one. As you can see above we gave height: 20px and width: 20px to our cursor.
To get the right point and center it we give

- cursor.height() / 2
- cursor.width() / 2

If you didn't get it, to center absolute positioned elements we give

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

This transform: translate(-50%, -50%) perfectly centers the element by taking off half of its height and width. This example is similar to what we did on jQuery. -cursor.height()/2 and -cursor.width()/2 are doing the same thing.

What is going to happen when we leave our mouse from browser screen?

$(window)
        .mouseleave(function() {
            cursor.css({
                opacity: "0"
            });
        })
        .mouseenter(function() {
            cursor.css({
                opacity: "1"
            });
        });

We don't want our custom cursor to be visible at the position where we left the screen.

With this code

$(window).mouseleave(function(){
cursor.css({opacity: "0"});
});

whenever we leave the screen our custom cursor's opacity will be 0 and can't be seen.

And with this one

$(window).mouseenter(function(){
cursor.css({opacity: "1"});
});

whenever our mouse is on the screen the custom cursor's opacity will be 1 and can be seen.

How do you understand if you click or not?

$(window)
        .mousedown(function() {
            cursor.css({
                transform: "scale(.2)"
            });
        })
        .mouseup(function() {
            cursor.css({
                transform: "scale(1)"
            });
        });

With these lines of code when we click (which is mousedown) our cursor scales down to 0.2 and when we don't (which is mouseup) it comes to its normal statement and scales back to 1.

Managing the hover statements

$(".link")
        .mouseenter(function() {
            cursor.css({
                transform: "scale(3.2)"
            });
        })
        .mouseleave(function() {
            cursor.css({
                transform: "scale(1)"
            });
        });

As you can see we have a class named link. If you have elements which have some effects on hover or you want your clickable items to be seen by user and want your custom cursor to change whenever you hover these elements, you can give every element that have this effect a class named link and so you can manipulate it from jQuery.

If your mouse is on the element(which is mouseenter) which has a link class, your cursor scales up to 3.2 and if you leave the hover state (which is mouseleave) it scales back to its normal state which is 1. You can give any class name you want and manipulate your custom cursor as you wish. This is just an example, you don't have to do the same.

Final

Don't forget these lines

html,
*{
cursor: none;
}

to make the default cursor unseen.

At last we have our custom cursor created and functioning as we desire.

Don't forget to place your cursor element right on top of the closing body tag.

<body>

<!--Some other elements  -->

<div class="cursor"></div>
</body>

Whole jQuery Code

$(document).ready(function(){
var cursor = $(".cursor");

    $(window).mousemove(function(e) {
        cursor.css({
            top: e.clientY - cursor.height() / 2,
            left: e.clientX - cursor.width() / 2
        });
    });

    $(window)
        .mouseleave(function() {
            cursor.css({
                opacity: "0"
            });
        })
        .mouseenter(function() {
            cursor.css({
                opacity: "1"
            });
        });

    $(".link")
        .mouseenter(function() {
            cursor.css({
                transform: "scale(3.2)"
            });
        })
        .mouseleave(function() {
            cursor.css({
                transform: "scale(1)"
            });
        });

    $(window)
        .mousedown(function() {
            cursor.css({
                transform: "scale(.2)"
            });
        })
        .mouseup(function() {
            cursor.css({
                transform: "scale(1)"
            });
        });
});

An example for you to see how it works

(To get the true experience please go to codepen)

Also you can use TweenMax for custom cursor animations. I didn't use it before but you can give it a shot if you want.

Thanks for your time. Have a good day <3

I Built My Personal Website

Batuhan — Sun, 19 Jan 2020 03:21:50 +0000

It's been a fairly long time since i posted here. I was working on my website for about 2 days. In this short journey i learned some new things. The most important thing is that this work made me more confident of my skills as a junior developer and i feel happier for what i have achieved. If you started to struggle like - did i learn enough to apply for a job or can i make more styled things etc. you really really must give a try to make a website for yourself. Because it is your portfolio and you try nearly your best to make a good impression. Eventough if you are stressed or not in a good hype to start something new, you find yourself trying hard and enjoying by the time you build it. Long story short www.batuhangulgor.dev is my website and these are the stats i got as you can see below.

I do look forward to get your comments about the site <3

May the bugs not be with you.

html{font-size:?} Responsive Magic

Batuhan — Tue, 07 Jan 2020 09:24:47 +0000

Today i am going to show you why do i use

html {
  font-size: 62.5%;
}

and why i think you should use it too.

The reason i am giving font size property to html is because it gives so much practicability to your code for further approaches. For example let's take this pen here:

There are still so many junior developers that are just changing the values of paddings, margins and the way layout is shown. But there is another important thing to change when you are writing the Media Queries, which is font size.

To make life easier you have to use rem whenever you give a font-size property unless it is a special text etc. Default value is defined as 1 rem = 16 px.
To make it down to 10 px and for the sake of doing calculations easier we are giving font-size: 62.5%. It can be calculated like if 16 px is 100% of the font size, 62.5% equals to 10 px. After making it so we can give any value to font-size as we desire while writing Media Queries.

As you can see in the pen i wrote earlier, i scale the font-size down to 50% if it hits the screen width of 380 px. And all the fonts just fit perfectly like i wanted to.

@media only screen and (max-width: 380px){

    html{
        font-size: 50%;
    }
}

If you want you can also give rem to margins, paddings, widths actually anything can have the px value. As the font size scales down or up with the query you write, same thing happens to any element which includes px value too. With the power of this magic you can set these properties between your elements(sections, list items etc.) and let the one line of Media Query code do the job for you. But for sometimes you can't get the perfect vision you want. If that happens to you just writing a couple lines of code can make it instead of writing different values for all the elements you have.

This is what i know and what i can give to you. If there is something i am missing please leave a comment.

That's all people, thanks for reserving your precious time to me. Love y'all <3

Making Neon Light with Box-shadow property

Batuhan — Sun, 05 Jan 2020 12:38:55 +0000

In this pen you can see how to make a neon lighted button with box-shadow and animated border with svg.

Pixel Art Time!

Batuhan — Sun, 05 Jan 2020 06:32:12 +0000

Hello everyone! I want this beautiful community to do some pixel art. Please share the screenshots <3