DEV Community: Muhammet Fatih Gul

React useNavigate faster than useContext

Muhammet Fatih Gul — Thu, 23 Dec 2021 09:45:04 +0000

I'm making a website using React, Nodejs, Expressjs and Mysql. It has a login, register and profile pages. When I logged in I'm redirecting users with useNavigate to the profile page. Profile page shows the user email.

But when I navigate users to Profile, in the first display, Profile page is not showing user email. I have to refresh to page to see email.

I'm using useContext and wrapped all application with Provider. There's no problem. But when i navigate to Profile, useContext working a little bit late and it's not changing state instantly. Is there a way to solve this?

React with Firebase. Do I need a backend? #discuss

Muhammet Fatih Gul — Tue, 21 Dec 2021 13:12:04 +0000

For example, if I want to make a social media app. It's going to be in web and mobile phones. I'm using React and also Firebase to store my data and authenticate. Do I still need to create a backend? Is it safe? Is .env files will be secure?

A Complete Guide to Centering in CSS (Horizontally, Vertically)

Muhammet Fatih Gul — Mon, 20 Dec 2021 17:22:59 +0000

Horizontal Inline (texts and links etc.)

.div{
    text-align: center;
}

Horizontal Block(divs and lists etc.)

.div{
    margin: 0 auto;
}

Vertical Inline (texts and links etc.)
If you want to vertically align inline elements, you have two options
First one is giving equal padding-top and padding-bottom.

.text{
    padding-top: 25px;
    padding-bottom: 25px;
}

The second one is changing line-height equal to box height. To do that, make sure you use "white-space" is "nowrap". So, it's not going to wrap. If you want to make multiple lines and vertically align. You can still set padding-top and bottom equally.

.text{
    height: 150px;
    line-height: 150px;
    white-space: nowrap;
}

Vertical Block (divs and tables etc.)
If you know the height of the element:

.parent{
   position: relative;
}
.child{
   position: absolute;
   top: 50%;
   height: 100px; /*This height is equal to parent's height */
   margin-top: -50px;
}

If you don't know the heights of the elements.

.parent{
   position: relative;
}
.child{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

A better way
Don't hesitate to use flexbox and grid system. I'm using them almost for everything. Even for the simplest things. It's not going to make your website load slower. Best way to center everything and easy to handle.

Centering Horizontally

.parent{
   display: flex;
   justify-content: center; 
}

Centering Vertically

.parent{
   display: flex;
   align-items: center; 
}

Centering Horizontally and Vertically

.parent{
   display: flex;
   justify-content: center;
   align-items: center; 
}

Using grid to center both way

.parent{
   height: 500px;
   display: grid;
}
span{
   margin: auto;
}

Will Serverless take over control? Should we worry about?

Muhammet Fatih Gul — Mon, 20 Dec 2021 11:57:22 +0000

Serverless is a concept that providers taking care of servers. Thus clients don't have to worry about what's going on on backend.

*No need to reinvent backend technologies in every project. *

For example, you want to build a social media app. You should use backend technologies and create a server that runs your backend codes. You should create a database to collect datas. You should create an API to communicate with Frontend technologies. You should use analytics tools to analyze your website and so on.

To create a trustworthy websites and apps, you always have to debug your code, pay hackers to find vulnerabilities of your website. This is never gonna end. Because even the biggest companies in the world are hacked so many times. 1 semicolon could crash all of your application and could be hard to find it. If you're not a big company, you can't afford to lose time.

Serverless is inevitable. Everybody writing databases, everybody using storage, everybody wants to monitor their datas, everbody want to have login, logout functionalities. But do we really have to reinvent every one of them?

If you heard about Netlify, Vercel, Auth0, Firebase, you already know what serverless is.

One thing that I scared about serverless is make me nervous about the internet's future. If you're an old internet user, you remember when the personal blogs are still popular. But do you remember "when", personal blogs are not popular anymore?

Creating personal blogs are become easier and easier everyday. When the Wordpress and Blogspot became so popular and conquer internet, popular blogs are started to death. So, If you increase the convenience, it decreases the value.

Even now, there's so many competition out there between developers. If so many people learning a new language, you also have to learn it. Because the market wants it.

As i said before, providers taking care of server jobs and frontend developers can just focus on their designing. They just have to communicate with backend and everything will be okay. Communicating with providers is not that much hard anyway.

I don't know if we worry about right now. Let me know in the comments section if you have any thoughts about this.

I'm going to share the best services that i found in the internet next time. It'll be about cloud providing, functions, authentications, forms, e-commerce and so on.

How I made a live code editor with Vanilla Javascript?

Muhammet Fatih Gul — Sun, 19 Dec 2021 15:17:04 +0000

I'm a huge fan of Codepen and Codesandbox websites. I tried to make a website like them some times. Ofcourse they're huge. I wasn't gonna be able to make a websites like them, but i wanted to see through how the things works. This is just a beginning. I'm going to make a website to render React JS and JSX codes live next.

Libraries that I used

Codemirror Editor

Codemirror already has CDNs to import but i wanted to import it locally. If you just want to try it out, you can use CDNs.

<!-- Codemirror Library -->
<script src="./Codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="./Codemirror/lib/codemirror.css">
<link rel="stylesheet" href="./Codemirror/theme/ayu-mirage.css">
<!-- MODES TO HIGHLIGHT CODES -->
<script src="./Codemirror/mode/javascript/javascript.js"></script>
<script src="./Codemirror/mode/css/css.js"></script>
<script src="./Codemirror/mode/xml/xml.js"></script>
<!-- ADDONS -->
<script src="./Codemirror/addon/selection/active-line.js"></script>
<!-- Style -->
<link rel="stylesheet" href="style.css">

Codemirror has so many addons like folding code blocks, autocomplete, custom searching input, auto closing brackets, auto closing tags etc.

And here is how my html look like:

<div class="container">
        <div class="pane code-pane">
            <div class="html-box code-box" id="html-box">
                <div class="title">
                    <span class="title-text">
                        HTML
                    </span>
                </div>
            </div>
            <div class="css-box code-box" id="css-box">
                <div class="title">
                    <span class="title-text">
                        CSS
                    </span>
                </div>
            </div>
            <div class="js-box code-box" id="js-box">
                <div class="title">
                    <span class="title-text">
                        JS
                    </span>
                </div>
            </div>
        </div>
        <div class="pane output">
            <iframe id="preview" frameborder="0"></iframe>
        </div>
    </div>
    <script src="app.js"></script>

There's two section. Bottom and top. They has pane class for the common purposes and unique classes for the differences.

Top pane has html, css and js sections init and everyone has their own titles. That's it.

And here is my CSS codes look like:

body{box-sizing: border-box;margin: 0; padding: 0; font-family: monospace;}
.container{
    width: 100vw; height: 100vh; overflow: hidden; background-color: #ddd;
    display: flex; flex-direction: column; }
.pane{ width: 100%; height: 50%; }
.code-pane{ background-color: aqua; display: flex; }
.output{ background-color: aquamarine; }
.code-box{ width: 34%; height: 100%; display: flex;  flex-direction: column;
    box-sizing: border-box; border-right: 1px solid white; font-size: 1.3rem; }
.html-box{ background-color: azure; resize: horizontal; overflow: auto; }
.css-box{ background-color: bisque; resize: horizontal; overflow: auto; }
.js-box{ background-color: blanchedalmond; resize: horizontal; overflow: auto;}
.title{ width: 100%; height: 40px; background-color: cadetblue; }
.title-text{ color: white; font-size: 2rem; margin-left: 20px;
     padding: 0 10px 0 10px; background-color: #3d3d3d; }
.CodeMirror{ height: 100%;}
#preview { width: 100%; height: 100%; background-color: cadetblue; }

HTML, CSS and JS boxes have resize functionalities horizontally. But i didn't use any other library to make it better. I only used CSS "resize: horizontal;" to make the divs resizable. But i'm sure it wouldn't be that much hard to make it. You can just use vanilla javascript and some math to do it.

And here is my javascript file:

//Code Mirror Initialization

var htmlCodeInstance = CodeMirror(document.getElementById("html-box"), {
    lineNumbers: true,
    tabSize: 4,
    mode: "xml",
    theme: "ayu-mirage",
    styleActiveLine: true,
});
var cssCodeInstance = CodeMirror(document.getElementById("css-box"), {
    lineNumbers: true,
    tabSize: 4,
    mode: "css",
    theme: "ayu-mirage",
    styleActiveLine: true,
});
var jsCodeInstance = CodeMirror(document.getElementById("js-box"), {
    lineNumbers: true,
    tabSize: 4,
    mode: "javascript",
    theme: "ayu-mirage",
    styleActiveLine: true,
});

// Run update() function, when the instances have change
htmlCodeInstance.on("change", function(){
    console.log(htmlCodeInstance.getValue())
    update();
});
cssCodeInstance.on("change", function(){
    console.log(cssCodeInstance.getValue())
    update();
});
jsCodeInstance.on("change", function(){
    console.log(jsCodeInstance.getValue())
    update();
});

//Change iFrame when you receive changes
function update() {
    let preview = document.getElementById("preview").contentWindow.document;
    codeTemplate = `
    <!DOCTYPE html>
    <html>
    <head>
    <style>`
     + cssCodeInstance.getValue() + 
    `</style>
    <body>` + 
    htmlCodeInstance.getValue() +
    `<script>` + jsCodeInstance.getValue() + `</script>` +
    `</body>
    </html>`
    console.log("CODE TEMPLATE: " + codeTemplate)
    preview.open();
    preview.write(codeTemplate);
    preview.close();
}

In the first part. I initialized my divs to the Codemirror and give some properties. I know there's a better way to do it. Please check this out before you use this method.

Article No Longer Available

In the second part, I gave it "onchange" method all of the editors that I have in the page. If one of them has changed update() function will be called.

".on()" method is built-in in Codemirror. So, I didn't use "addEventListener" or "onChange" property in HTML document. This is a better way I think.

and finally, in the last part, I take the iframe in the html document. This function only be called when the user type something in one of the editors.

I made a Code Template. So, when the user change something in one of the editors, they'll change the template and i'll write it to the iframe.

That's it. Hope you like it. See you soon.

SEE GITHUB REPOSITORY

Why Medium is not good for developers

Muhammet Fatih Gul — Wed, 15 Dec 2021 09:17:16 +0000

Actually, i didn't even started to discover the dev.to website and i immediately wanted to write a post. Because being in a developer community makes me want to be creative. I was looking for a website like this for a long time.

Medium was not a bad choice but clickbate is take over the control in Medium. Because people are earning money in Medium and they're trying their best to earn more.

Medium is a big problem for developers

Developers have to manage their time properly. Because we have to reach the informations and solutions as quick as possible. Otherwise, our focus is not going to stay still. Major percent of the developers have focus problems. Because there's so much thing to think about in this profession. Only experienced developers doing priority arrangements properly.

So, the people that are not experienced much shouldn't start reading articles in Medium. Because they're not going to learn anything that changes their life.

Headings are promising but the contents are not

I spend so many times in Medium but i can't remember that changed my thoughts about anything. But when i see the front page of Medium, it feels like "Holy crap, my life is about to change. I'm going to become a better developer/person".

Probably you also feel that too. Reading so many "how i become a web developer", "12 important X every x should know", "how i got my first job on X", "how i earn my first $100.000 with my SaaS" is not going to help you to have a clear vision.

Conclusion

As i said before, people are earning money on Medium and they're trying their best to earn more and using clickbate headings to achive it. Their content are not meant to be the best. They just needs your clicks. If you're not an experienced developer, probably you're going to click all the interesting headings and got head confuse about the things that you already knew. Plus, so many times that wasted.