Forem: Tayfun Erbilen

Your React Codes Might Not Be In Safe!

Tayfun Erbilen — Sun, 14 Nov 2021 22:48:27 +0000

If you are using create-react-app for creating react applications and using yarn build to get build, your react codes might not be safe.

Because, if you run yarn build command without any spesification, it will generating source maps as well.

And if you put builded files without deleting source maps to your server, anyone can see your entire react project codes.

PS: I know everybody can see your JS files, but there is difference between them. Without source map, they can see compiled version, and even if they try to beautify them they can't understand what did you do exactly. But if you left source map files, they can see whole project like you see while development process.

How bad is it?

If you go this website, https://svgeditoronline.com/editor/ and open developer tools, and select "Sources" tab. Then you will able to see all project codes sadly.

What we have to do?

We have to delete .map files from builded files which is in build/static/js folder.

And for the next build you should change your package.json build command

find this line

...
"build": "react-scripts build",
...

change with this

...
"build": "GENERATE_SOURCEMAP=false react-scripts build",
...

Now, your code is safe. This is a small but important think.

I checked a lot of live react project, also checked selling react scripts on codecanyon, and guess what I found? Almost every project left .map files in static/js folder.

TL;DR

Delete all your .map files from build/static/js folder.
Change your build command on package.json from this "build": "react-scripts build", to this "build": "GENERATE_SOURCEMAP=false react-scripts build", for your next builds.
Now you are safe, I hope :)

Animated placeholder with CSS / Tailwind

Tayfun Erbilen — Sat, 24 Jul 2021 01:05:06 +0000

Hello everybody, in this article we will create animated placeholder using css and tailwind. To do that, we need to enable JIT on configuration file. Because peer- utility that we will use is working with JIT mode.

So, our tailwind.config.js file should be like this



module.exports = {
  mode: 'jit',
  // other configs...
}

CSS Way

So, let's see first how we can do with css? But first, we need html :)



<div class="input-with-placeholder">
    <input type="text" id="username" />
    <label for="username">Username</label>
</div>

Basically, when we focus to input, then we need to use + selector to select label comes after input. But before we do that, let's write some css to make sure that example looks pretty :)



/*
some reset css..
*/

.input-with-placeholder {
  width: 250px;
  position: relative;
}
.input-with-placeholder label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: 300ms all;
}
.input-with-placeholder input {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  background: #f8f8f8;
}

now it looks like this

so, what's next? When we focus to input, we will change label position, font-size, height and padding-left properties.



.input-with-placeholder input:focus + label {
  height: 50%;
  padding-left: 0;
  transform: translateY(-100%);
  font-size: 12px;
  color: #777;
}

so now, animation will works perfectly. you can check the gif :)

but, when we write something to input, and when it lose focusable, label will back to normal style and we don't wanna do this right? So what can we do? Well, we can add required attribute to input, and then we can control with :valid in css. Let's do that.

add required attribute to input



<input type="text" id="username" required />

we will use same css with ":focus" for ":valid", so we don't need to write again. we can use like this



.input-with-placeholder input:focus + label,
.input-with-placeholder input:valid + label {
  height: 50%;
  padding-left: 0;
  transform: translateY(-100%);
  font-size: 12px;
  color: #777;
}

we did it!

here's the demo.

Tailwind CSS Way

As I always said, how we can make it faster to development process? Using tailwind css, for sure :)

So, what we will use? We will use group and peer utilities.

Let's create html + css and explain everthing what we did.



<div class="w-56 relative group">
    <input type="text" id="username" required class="w-full h-10 px-4 text-sm peer bg-gray-100 outline-none">
    <label for="username" class="transform transition-all absolute top-0 left-0 h-full flex items-center pl-2 text-sm group-focus-within:text-xs peer-valid:text-xs group-focus-within:h-1/2 peer-valid:h-1/2 group-focus-within:-translate-y-full peer-valid:-translate-y-full group-focus-within:pl-0 peer-valid:pl-0">Username</label>
</div>

so what we did?

.w-56.relative.group = we set width, relative for absolute label, group for using group-focus-within

.w-full.h-10.px-4.text-sm.peer.bg-gray-100.outline-none = we set width full, height 2.5 rem, padding left and right 1rem, font-size 0.875rem, peer for using peer-valid, background gray and no outline.

.transform.transition-all.absolute.top-0.left-0.h-full.flex.items-center.pl-2.text-sm = we positioned label into input, and we add transition for the animation and transform for using the translate.

when we focus to input, we changed the label styles like what we did in normal css with group-focus-within

group-focus-within:text-xs.group-focus-within:h-1/2.group-focus-within:-translate-y-full.group-focus-within:pl-0 = so basically, we set font-size smaller, half height, -100% translate y and padding-left 0.

remember, when we write something to input, and when it lose focusable, label will back to normal style and we don't wanna do this right? so because of that, we used peer and peer-valid utilities.

we did same thing what we did in group-focus-within. And here's the demo.

Quick tip

When your input in a form and when you don't want to validate some inputs, you can use novalidate attribute for <form> tag. So, css will still work, but you will not see any error message at all.

Thank you for reading, have a nice day.

Dropdown with CSS / Tailwind

Tayfun Erbilen — Tue, 06 Jul 2021 09:01:41 +0000

1- CSS Way

In this article, I would like to show you, how to create dropdown menus with CSS. For do that, we will use :focus-within. New CSS features, make things easier :)

So what we need? First, we need a <div> and inside of div, we need <button> (because it is focusable) and <nav> for dropdown menu.

Let's create HTML structure first.



<div class="dropdown">
    <button>Menü</button>
    <nav>
        <ul>
            <li>
                <a href="#">
                    Edit
                </a>
            </li>
            <li>
                <a href="#">
                    Delete
                </a>
            </li>
            <li>
                <a href="#">
                    Reply
                </a>
            </li>
        </ul>
    </nav>
</div>

So first, I have to hide my <nav> tag.



.dropdown nav {
   display: none;
}

And now, when I clicked to <button>, I need to show <nav> tag again. To do that, I will use :focus-within. Let's make it.



.dropdown nav {
    display: none;
}
.dropdown:focus-within nav {
    display: block
}

This will works. But with 1 problem. Which is, if I click to nav tag (except <a> tag inside) <nav> tag will be closed because it will lose focusable and :focus-within will no longer work.

So, if this is a problem for you, you can add [tabindex="0"] to your <nav> tag. When you do that, <nav> become focusable as well. Let's do that.



<div class="dropdown">
    <button>Menü</button>
    <nav tabindex="0">
        <ul>
            ....
        </ul>
    </nav>
</div>

I know it looks ugly :) Let's make it beauty. I will use SASS, you can use anything to style it.



* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.dropdown {
    position: relative;
    button {
        height: 2.5rem;
        padding: 0 1.25rem;
        background: #333;
        color: #fff;
        border-radius: 0.25rem;
        font-size: 1rem;
        cursor: pointer;
    }
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: 300ms all;
        border: 2px solid #333;
        border-radius: 0.25rem;
        width: 12.5rem;
        ul {
            padding: 0.188rem 0;
            li {
                a {
                    display: block;
                    padding: 0.438rem 0.625rem;
                    color: #333;
                    &:hover {
                        background: #f8f8f8;
                    }
                }
            }
        }
    }
    &:focus-within nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0.25rem);
    }
}

Alright, it look fine now :)

You can checkout on codepen.

2- Tailwind Way

Using without using CSS, how we can make it faster? Yes, using tailwind :D Let's make it same dropdown with tailwind.



<div class="p-4">
    <div class="group relative">
        <button class="bg-gray-800 text-white px-6 h-10 rounded">Menü</button>
        <nav tabindex="0" class="border border-2 bg-white invisible border-gray-800 rounded w-60 absolute left-0 top-full transition-all opacity-0 group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-1">
            <ul class="py-1">
                <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100">
                        Edit
                    </a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100">
                        Delete
                    </a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100">
                        Reply
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

and here the demo

Note: I'm using JIT. So if some variants not work (such as group-focus-within) you can configure your tailwind.config.js like this;



module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.html'], // change it
  darkMode: 'media',
  theme: {
    extend: {
    },
  },
  variants: {
    extend: {},
  },
}

Thank you for reading, have a great day all of you.

#frontendaily

Tayfun Erbilen — Sat, 19 Sep 2020 07:34:59 +0000

Hello everybody, I created a website and I'm sharing a front-end project every day.

If you new of web development, you might be want to follow :)

Also, there are video tutorials but unfortunally language isn't english yet. If I improve my english, I'll start to create english web tutorials. However, you can still watch and learn something. Because there is no need to understand language while writing code, all you need to understand is what's going on with that codes. At least I believe that.

Web: https://frontendaily.com/

Green Screen Animation with CSS

Tayfun Erbilen — Wed, 01 Jul 2020 13:34:17 +0000

Hello everybody, I'm a youtuber and recording web development lectures on my channel. A few days ago I decided to add "subscribe" animation into my videos but unfortunately my hardware wasn't enough to run video edit programs such as "Abobe Premier" or "Final Cut Pro".

So what did I do? I added "subscribe" template into my videos but how? I create a CSS template something like this;

And I added little animation to make sure looks pretty.

Demo: https://codepen.io/tayfunerbilen/pen/OJMOvZj

And I recorded this screen with Camtasia Studio, then edit with Camtasia Studio as well. Because Camtasia is working very well in my computer.

In camtasia, I used "Remove a Color" effect to remove green screen.

Here is the result, with low quality computer finally I can use "subscribe" template on my videos. Also I implemented more template such as "like" template. To take control is very easy and no need big video edit programs anymore :)

I'm not sure this is a good idea but it worked for me, may be one day it works for you. Happy coding!

Popup with Pure CSS

Tayfun Erbilen — Thu, 10 Oct 2019 08:50:43 +0000

Before start to article, I'm sorry for my bad english. I'm still improving my self. So, let's start.

I believe, we don't need to use Javascript in many things. Popup is one of them :) In this article, we'll create popup without javascript.

So, the key thing is checkboxes. We will use checkbox and :checked pseudo class to create our popup.

How it look HTML codes

It looks something like this;

<div class="popup-container">
    <label class="popup-button" for="login-popup">Login</label>
    <input type="checkbox" id="login-popup">
    <div class="popup">
        <div class="popup-inner">
            <div class="popup-title">
                <h6>Login</h6>
                <label for="login-popup" class="popup-close-btn">Close</label>
            </div>
            <div class="popup-content">
                <!-- form -->
            </div>
        </div>
    </div>
</div>

Let's write some CSS codes

I'm gonna use sass for better write experience.

.popup-container {
    display: inline-block;
    .popup-button {
        background: #333;
        line-height: 34px;
        color: #fff;
        padding: 0 20px;
        border-radius: 3px;
        display: block;
        cursor: pointer;
        &:hover {
            background: #444;
        }
    }
    // we'll continue from here
}

Okay, now our popup looks like this.

Let's continue to write to do better look :)

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(#000,.7);
  z-index: 10;
  display: none;
  .popup-inner {
    width: 400px;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .popup-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      h6 {
        font-size: 18px;
        font-weight: 500;
      }
      .popup-close-btn {
        cursor: pointer;
        background: #eee;
        display: block;
        line-height: 30px;
        padding: 0 15px;
        font-size: 14px;
        color: #222;
        border-radius: 3px;
      }
    }
  }
}
```
{% endraw %}


Okay, it looks better now.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4haxs69mpmomwaui02jn.png)

Now, let's add form elements and do some great CSS.
{% raw %}


```html
<form action="">
    <ul>
        <li>
            <input type="text" placeholder="Username">
        </li>
        <li>
            <input type="password" placeholder="Password">
        </li>
        <li>
            <button type="submit">Log in</button>
        </li>
    </ul>
</form>
```





```scss
.popup-content {
  ul {
    li {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      input {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 34px;
        padding: 0 15px;
        font-size: 14px;
        box-sizing: border-box;
      }
      button {
        width: 100%;
        line-height: 34px;
        background: #666;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        border: none;
        font-size: 14px;
        &:hover {
          background: #444;
        }
      }
    }
  }
}
```



![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/983nlrimkywicre68iy7.png)

Now, looks legend :) I think we ready to implement hide/show feature to our popup with css.

Let's hide popup div and start to write CSS for checkbox.
{% raw %}


```scss
.popup {
  display: none;
}

>input {
  display: none;
  &:checked + .popup {
    display: flex;
  }
}
```
{% endraw %}


Actually, that's all :) But, let's little bit improve your popup experience.

I don't wanna use hide/show, I will add animation like popup will come from bottom to top. Then when I click to close button, popup will goes to bottom again :) Let's change our css codes a little bit.



```scss
.popup {
  // display: none;
  opacity: 0;
  visibility: hidden;
  transition: 250ms all;
  .popup-inner {
    // top: 50%;
    top: 150%;
    transition: 250ms all;
  }
  >input {
    display: none;
    &:checked + .popup {
      opacity: 1;
      visibility: visible;
      .popup-inner {
        top: 50%;
      }
    }
  }
}
```



![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nu2em0dej9423n1sfb6j.gif)

One more thing, when we click black area, it's not closing. What we can without javascript? We'll use label tag again to hide when click to black area :)



```html
<div class="popup">
  <label for="login-popup" class="transparent-label"></label>
  ...
</div>
```




```scss
.transparent-label {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
}
```



That's all :) Now we have better ux.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b9kf86cvfchlozuwso8n.gif)

I believe someone already mentioned this before me, but hey "Different Ropes For Different Folks" :)

[Check out demo on Codepen](https://codepen.io/tayfunerbilen/pen/wvvKBeX)

Thanks for putting up with me.