DEV Community: Michał Górnicki

Interesting technical interview

Michał Górnicki — Mon, 07 Feb 2022 09:18:03 +0000

I had very good and enlightening technical interview with IT company from Cracov last thursday. I learned that I must expand my knowledge about advanced React concepts. Now I'm working on creating React tutorial website. It will be live later this week. Cheers!

My new project is almost done!

Michał Górnicki — Wed, 19 Jan 2022 13:50:38 +0000

Hello,

My cat adoption website project is almost done.
You can see it here: https://michalgornicki.github.io/cats

You can search for your companion, browse database with filter options, browse cat profiles and get contact number to current cat owner. You can also sign up to your account. Some informations are available only for logged users.

Functionalities in development:

Adding cats to favourites visible in subpage.
Creating new cat cards for users.
Replace local JSON with online database (probably in MongoDB).
Adjusting page for mobile users.

Most simplistic tutorial to React Router - create routing in 2 minutes

Michał Górnicki — Thu, 13 Jan 2022 10:20:13 +0000

Hi!
I wanted to create very fast guide to React Router because first time I routing it was big struggle.

So, let's begin.

After creating app by command npx create-react-app "your-app-name" install React Router with command npm install react-router-dom@6.
In main file mostly called App.jsx import React Router components by adding in the beginning import { Route, HashRouter as Router, Routes } from "react-router-dom";
Again in App.jsx create structure like this:

<Router>
      <div>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/SubPageOne" element={<SubPageOne/>} />
          <Route path="/SubPageTwo" element={<SubPageTwo/>} />
        </Routes>
      </div>
    </Router>

As you can see there are few react components (Navbar, Home, SubPageOne, SubPageTwo). I've created Navbar component outside of Routes container so it can be available on every subpage.
In Navbar component where we want to have navigation to every subpage create links to them:

<Link to="/">strona główna</Link>
<Link to="/Database">baza danych</Link>
<Link to="/Create">stwórz nowe ogłoszenie</Link>

And that's everything. Your React Router is done and fully working!

New project - cat adoption website!

Michał Górnicki — Wed, 12 Jan 2022 16:39:23 +0000

Hello everyone,

I'm very excited to start building my next project, cat adoption portal. There will be options to search database of cats ready to find new home, create your account and follow informations about cat adoptions or publish your notice about cat looking for new owner.

For now I'm creating design of this project in Figma.

Hello Twitter!

Michał Górnicki — Tue, 11 Jan 2022 19:04:18 +0000

Do you have Twitter account? If so please let me know.
Follow me on: https://twitter.com/Michal_FrontEnd

Working on Figma

Michał Górnicki — Tue, 11 Jan 2022 15:09:18 +0000

Today I was working on Figma, to discover its capabilities.
It is really great software, inspiring to create design of websites for example. I have created today my new resume in Figma, you can check it here.

Objects animation when visible in window viewport

Michał Górnicki — Tue, 11 Jan 2022 14:24:18 +0000

I used to hard-code proper height for javascript function to animate object with property window.pageYOffset. It mostly worked well but sometimes created problems, for example with viewing page on mobile phones.
Better way to solve this problem is to use getBoundingClientRect() - this method returns the size of an element and its position relative to the viewport. So if you write getBoundingClientRect().top you will get distance in pixels from bottom of viewport to top of selected object.

Example of use of this method:
if (document.getElementById("container").getBoundingClientRect().top < 0) { document.getElementById("container").style.backgroundColor="black"} else {document.getElementById("container").style.backgroundColor="white"}

In this case if top of "container" will touch beginning of our viewport background color of this object will turn to black.
Feel free to use my code.

Hello there!

Michał Górnicki — Tue, 11 Jan 2022 14:11:19 +0000

I would like to say hello to you.

I'm a developer from Warsaw in Poland and I will write here about my journey with front end developing.