DEV Community: Paweł Czarnecki

How zoom helped me NOT land my first job

Paweł Czarnecki — Thu, 08 Sep 2022 11:10:49 +0000

After I've submited over 100 applications, I've got chance to experience my first interview

So how it went?

Zoom first crashed right after I joined meeting when I tried to turn on my webcam.

A few minutes later, the zoom crashed a second time.

I rejoined again and answered few interviewers questions. One of interviewers asked me about my experience with bootstrap and SCSS, after I finished my monologue I've noticed that they are silent and zoom crashed for last time.

I've asked myself, am I mentally challenged and unable to use simple software like zoom? Or maybe my potato computer is too weak to deal with zoom? It handled UE5 and video rendering just fine.

I decided to check if my suspicions were right and opened zoom, started the meeting and everything worked fine, it didn't crash and even my webcam worked fine.

Hopefully during my next interview if I fail, I fail because of my lack of experience and/or skills.

Send an email without redirecting or reloading the page

Paweł Czarnecki — Fri, 27 May 2022 10:58:17 +0000

HTML

<div class="bg-text">Send Form</div>
<form id="myForm" method="POST" autocomplete="off" onsubmit="event.preventDefault(); sendForm()">
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" />

    <label for="email">Email: </label>
    <input type="email" name="email" id="email" />

    <label for="subject">Subject: </label>
    <input type="text" name="subject" id="subject" />

    <label for="message-input">Message: </label>
    <textarea name="message-input" id="message-input" rows="7"></textarea>

    <button type="submit" value="Send" id="submit" class="">Send</button>
</form>

SCSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 20px;
}
body {
    background-color: rgb(5, 43, 38);
    color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.bg-text {
    position: absolute;
    font-size: 15rem;
    opacity: 0.1;
    text-align: center;
    user-select: none;
    pointer-events: none;
}
form {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 60px 50px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 5px;
    gap: 5px;
    label {
        margin-top: 15px;
    }
    input,
    textarea {
        width: 350px;
        border-radius: 5px;
        background-color: rgba(14, 42, 36, 0.839);
        border: none;
        color: #ddd;
        padding-left: 5px;
        outline: none;
        &:focus{
            border-bottom: 3px solid rgb(8, 92, 90);
        }
    }
    input {
        height: 40px;
    }
    textarea {
        padding-block: 5px;
        resize: none;
        height: 200px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: rgb(8, 92, 90);
        }
    }
    #submit {
        padding: 15px 30px;
        margin-top: 20px;
        color: #ddd;
        background-color: rgb(8, 92, 90);
        border: none;
        cursor: pointer;
    }
}

JavaScript

const sendForm = () => {
    const data = new FormData(document.getElementById('myForm'))
    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'sendmail.php')
    xhr.onload = function () {
        console.log(this.response)
    }
    xhr.send(data)
}

PHP

<?php 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $message = $_POST['message-input'];

    $mailheader = "From: ".$name." <".$email.">\r\n";

    $to = 'your-email@email.com';

    mail($to, $subject, $message, $mailheader);
?>

Preloader for your website

Paweł Czarnecki — Thu, 26 May 2022 08:58:17 +0000

In this post I'm going to create easy preloader. In this project I will use HTML, SCSS and a little bit of JavaScript.

We are going to start from adding some content to our page like this one below

<div class="content">
  <h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi vero nesciunt modi, incidunt ea similique reiciendis provident eligendi suscipit omnis.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores odit accusamus ipsa velit consequatur porro dolores at voluptatum. Obcaecati ipsa earum fugit. Rem ad quidem quos vel assumenda aperiam, unde, maxime ipsum natus laborum vero quia consequatur accusamus explicabo ullam aliquid iste similique officiis nihil, voluptate quasi recusandae. Labore voluptas facilis molestias corrupti explicabo mollitia earum cum, eius commodi neque saepe vitae aliquam quis id. Necessitatibus delectus doloribus officia ducimus sequi, error itaque repellat accusantium repellendus? Tenetur repellat obcaecati, perspiciatis accusamus ipsum excepturi nesciunt autem distinctio dolore quis qui facilis necessitatibus dolorum doloribus libero est mollitia saepe minus beatae quae expedita soluta ex ducimus. Blanditiis fugiat non officia illum. Iusto, eos dolores rerum necessitatibus eaque odio, atque, inventore amet neque libero modi ut blanditiis corrupti nam harum repellat soluta officiis tempore iste est natus omnis. Omnis nisi, fugit molestias minus recusandae quos. Reiciendis laudantium dicta natus? Iste eaque placeat cumque adipisci deleniti recusandae, labore velit, totam quaerat, error debitis ipsa ratione neque! Porro suscipit laboriosam minima, possimus facilis esse, rerum, error nesciunt repellat ipsum necessitatibus? Similique, sapiente aliquid. Non quisquam laudantium, ipsa minus eaque laboriosam deserunt neque eveniet quae porro quod, dolor corporis! Praesentium cupiditate, itaque libero eum perspiciatis quod.</p>
</div>

And our Preloader itself

<div class="preload">
  <div class="circle__1">
  </div>
  <div class="circle__2">
  </div>
  <div class="circle__3">
  </div>
</div>

HTML is done now it's time for SCSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 22px;
  font-family: 'Poppins', sans-serif;
}
body{
  background-color: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.preload{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #1b1b1b;
  transition: 400ms linear;
         ...
}
.content{
  margin: 0 auto;
  margin-top: 100px;
  padding: 20px;
  width: min(calc(100% - 2rem), 1000px);
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.719);
  h1{
    color: lime;
    font-size: 1.4rem;
  }
  p{
    margin-top: 30px;
    color: #b8b8b8;
  }
}

Now we will style our circles using sass for loop

@for $i from 1 through 3 {
  .circle__#{$i} {
    border: 4px solid lime;
    border-radius: 50%;
    position: absolute;
    filter: drop-shadow(0px 0px 5px lime);
    width: calc(250px - $i * 50px);
    aspect-ratio: 1 / 1;
    animation: calc(1.4s - $i * 0.2s) spin linear infinite;
  }
}

And style individual circles

.circle {
  &__1 {
    border-color: lime lime lime transparent;
  }
  &__2 {
    border-color: transparent transparent lime lime;
  }
  &__3 {
    border-color: lime transparent transparent lime;
  }
}

But we still don't have animation so let's add one

@keyframes spin{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

It's time for JavaScript. We want to remove our preloader after page is loaded

window.addEventListener('load', () => {
  document.querySelector('.preload').classList.add('finished')
})

Let's add style for 'finished' class in preloader

&.finished {
  transform: translateY(-100%);
}

But it doesn't look to good, to fix that we can add some fadeout animation to our circles and delay preloader slide out effect, let's add this loop in finished class

@for $i from 1 through 3 {
  .circle__#{$i} {
    opacity: 0;
    transition: 400ms linear;
  }
}

And delay in preload class

transition-delay: 500ms;

But it's still disappears a little bit to fast, in order to fix that we will use setTimeout in our JS

window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.preload').classList.add('finished')
  }, 1000)
})

Finished preloader looks like this

All source code you can find Here
or similiar version of this preloader on Codepen

Multiple Themes using JS and CSS

Paweł Czarnecki — Wed, 25 May 2022 07:29:54 +0000

This time we are going to create multiple themes switch similar to this Multiple themes with JS and JSON but much easier. So let's get to work.
First we need our HTML structure

<div class="themes">
    <div class="theme" onclick="changeTheme('light')"></div>
    <div class="theme" onclick="changeTheme('dark')"></div>
    <div class="theme" onclick="changeTheme('red')"></div>
</div>
<div class="container">
        <div class="container">
            <h2>Themes Switcher Using CSS Classes</h2>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore magnam atque, minima doloribus reprehenderit libero necessitatibus dicta vel obcaecati? Provident totam adipisci veniam aperiam obcaecati reprehenderit, eaque eos laborum placeat quam laboriosam distinctio nostrum tenetur tempore dolore assumenda numquam esse id earum ipsa iure vitae, reiciendis, natus magnam? Aperiam mollitia harum hic sed maxime, eaque illum provident molestiae modi non enim exercitationem officia pariatur minima eum consequatur reprehenderit dicta quo magnam, dolorem quas. Architecto fuga amet quidem ratione, earum maxime neque repudiandae nostrum perspiciatis facere porro quod, sapiente iure et! In possimus, nam vitae, quod ipsam architecto at repellat perferendis, nemo earum autem? Exercitationem nam facilis doloremque eligendi suscipit. Delectus eveniet inventore adipisci. Cumque suscipit itaque animi voluptate illum veniam commodi molestiae nemo! Nihil, aut? Corporis provident vel voluptates labore ad fugiat, cum eum non, expedita modi assumenda alias nihil blanditiis natus ipsa hic nisi mollitia! Atque delectus veritatis, reprehenderit minus cupiditate aliquam quos eaque odit laudantium cum laboriosam? Ullam expedita ipsa adipisci, dolorem voluptates ipsam eaque aliquid exercitationem rerum consectetur suscipit reprehenderit et dolore, placeat assumenda beatae? Impedit iste, molestiae facere illo velit illum consequatur totam ex tenetur nisi, ratione similique saepe consequuntur recusandae in accusantium alias suscipit adipisci quisquam. Corporis dolorem fugiat reprehenderit, aspernatur nam est ullam repudiandae libero dolore ex quo sed, architecto, quidem earum inventore at. Sunt velit distinctio eaque commodi, asperiores recusandae delectus sed saepe. Nostrum temporibus sit, numquam reprehenderit dolores qui ea culpa quasi perspiciatis consectetur enim minima doloribus animi tenetur quo quis cumque molestias laudantium fugiat iure dicta dolor! Praesentium, quo nesciunt
        </div>

We have our HTML, now it's time for CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}
body {
  background-color: var(--bg-color);
  color: var(--text);
}
h1 {
  margin-top: 20px;
  margin-left: 1rem;
}
.themes {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
  padding: 20px;
  width: 200px;
  background-color: var(--secondary);
  margin-left: 1rem;
  margin-top: 20px;
}
.themes .theme {
  width: 30px;
  border-radius: 8px;
  height: 30px;
  cursor: pointer;
}
.themes .theme:nth-child(1) {
  background-color: #ddd;
}
.themes .theme:nth-child(2) {
  background-color: #333;
}
.themes .theme:nth-child(3) {
  background-color: rgb(57, 2, 2);
}

.container {
  width: min(100% - 2rem, 1200px);
  margin-top: 80px;
  margin-inline: auto;
  background-color: var(--secondary);
  padding: 20px;
}

Ok, we have CSS structure, we can add default, dark and red theme now

:root {
  --bg-color: #eee;
  --secondary: #ccc;
  --text: #333;
}
.dark {
  --bg-color: #333;
  --secondary: #222;
  --text: #ddd;
}
.red {
  --bg-color: rgb(57, 2, 2);
  --secondary: rgb(102, 23, 23);
  --text: rgb(235, 235, 235);
}

Our Page looks like this now

But we can't change our themes without JavaScript

const changeTheme = (theme) => {
    document.body.classList = ''
    document.body.classList.add(theme)
}

That's better.
Here is the result:
Light(default) theme:

Dark theme:

Red theme:

But we're not finished yet. As in my previous post, we will to add localStorage.
First we need to find matching theme and then set localStorage

switch (theme) {
    case 'light':
        localStorage.setItem('theme', 'light')
        break
    case 'dark':
        localStorage.setItem('theme', 'dark')
        break
    case 'blue':
        localStorage.setItem('theme', 'blue')
        break
}

And let's load localStorage

document.body.classList = localStorage.getItem('theme')

For all files visit my Github Respository.

For more of my projects, please visit my Github or Codepen Profile

Multiple themes with JS and JSON

Paweł Czarnecki — Tue, 24 May 2022 14:52:19 +0000

First let's create themes container in html

<div class="themes">
    <div class="theme" onclick="changeTheme('light')"></div>
    <div class="theme" onclick="changeTheme('dark')"></div>
    <div class="theme" onclick="changeTheme('blue')"></div>
</div>

and content container to see changes after choosing theme

<div class="container">
  <h2>Container</h2>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore magnam atque, minima doloribus reprehenderit libero necessitatibus dicta vel obcaecati? Provident totam adipisci veniam aperiam 
</div>

Now we are going to add some basic styling

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body {

}
.themes {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 8px;
    padding: 20px;
    width: 200px;
    margin-left: 1rem;
    margin-top: 20px;
    .theme {
        width: 30px;
        border-radius: 8px;
        height: 30px;
        cursor: pointer;
        &:nth-child(1) {
            background-color: #ddd;
        }
        &:nth-child(2) {
            background-color: #333;
        }
        &:nth-child(3) {
            background-color: rgb(5, 2, 57);
        }
    }
}
.container {
    width: min(calc(100% - 2rem), 1200px);
    margin-top: 80px;
    margin-inline: auto;
    padding: 20px;
}

And our default theme

:root {
    --bg-color: #eee;
    --secondary: #ccc;
    --text: #333;
}
body {
    background-color: var(--bg-color);
    color: var(--text);
}
.themes {
       background-color: var(--secondary);
}
.container {
    background-color: var(--secondary);
}

We have our project which looks something like this

Ok, so now we can create themes in json

[
    {
        "id": "light",
        "colors": {
            "bgColor": "#eee",
            "secondary": "#ccc",
            "text": "#333"
        }
    },
    {
        "id": "dark",
        "colors": {
            "bgColor": "#333",
            "secondary": "#222",
            "text": "#ddd"
        }
    },
    {
        "id": "blue",
        "colors": {
            "bgColor": "rgb(5, 2, 57)",
            "secondary": "rgb(47, 23, 102)",
            "text": "rgb(235, 235, 235)"
        }
    }
]

We have almost everything except javascript. First, we need the function we are calling in html

const changeTheme = (theme) => {

}

Our function is created, now we need to load themes from json file

const changeTheme = (theme) => {
    fetch('./themes.json')
        .then((response) => response.json())
        .then((data) => {

    })
}

We have successfully loaded our themes, the last thing to do is to use them. Let's filter through all of our themes and choose one matching the users's choice

data.filter((data) => {
    const { id, colors: { bgColor, secondary, text }} = data
    if (id === theme) {

    }
})

Finally, we will set the colors of the CSS properties to the colors of the selected theme

document.documentElement.style.setProperty('--bg-color', bgColor)
document.documentElement.style.setProperty('--secondary', secondary)
document.documentElement.style.setProperty('--text', text)

As a bonus we can use localStorage to save our themes

localStorage.setItem('bgColor', bgColor)
localStorage.setItem('secondary', secondary)
localStorage.setItem('text', text)

and load them from localStorage

document.documentElement.style.setProperty('--bg-color', localStorage.getItem('bgColor'))
document.documentElement.style.setProperty('--secondary', localStorage.getItem('secondary'))
document.documentElement.style.setProperty('--text', localStorage.getItem('text'))

Our simple page now looks like this

For all project files visit my Github Respository

If you want to see more of my work visit my Github or Codepen profile