DevLogs #1

Writing my profile 5-Dec-2020

Final result

How I`ve implemented smooth scrolling on my website

You can check the final result on my website.

The story

The second day of working on my personal website started (actually it’s 7 PM but a true n̶o̶l̶i̶f̶e̶r̶ developer starts coding right at this time).

Problem: on navigation link click the user is being instantly teleported to the section on my portfolio.

Solution: to fix this issue by add smooth scrolling functionality.

How to NPM power

One of the most beautiful parts of learning React & Typescript is the possibility to use npm.

If you don’t know what is NPM — I`ll try to explain it in 5 small steps:

1. You have a problem/idea
2. You want to solve/implement it
3. You go to npm, write keywords
4. You find that someone has already implemented it and have thousands of downloads per week

̶5̶.̶ ̶Y̶o̶u̶`̶r̶e̶ ̶c̶r̶y̶i̶n̶g̶ ̶b̶e̶c̶a̶u̶s̶e̶ ̶e̶v̶e̶r̶y̶o̶n̶e̶ ̶i̶s̶ ̶a̶ ̶b̶e̶t̶t̶e̶r̶ ̶d̶e̶v̶e̶l̶o̶p̶e̶r̶ ̶t̶h̶a̶n̶ ̶y̶o̶u̶.̶ ̶

5. You`re reusing existing implementation

React-scroll

I`ve found components for the “React”.

Let me be a gentleman and place found components here for you (I know you won’t go & google it on your own, my little lazy friend):

react-scroll

@types/react-scroll

P.s. luckily 4 me there was a @types definition for the Typescript, so instead of writing it on my own I can spend time & write this article. What a time to be alive.

Implemented code changes + made a refactoring:

Free code snippet — a bonus for my readers:

const CreateLink = (text: string, id: string) => <Link
className=”pl-3"
activeClass=”active”
to={`${id}`}
spy={true}
smooth={true}
hashSpy={true}
offset={0}
duration={500}
isDynamic={true}
ignoreCancelEvents={false}
> {text} </Link>;

*Small note: In the class section, you will find “pl-3" — this is a bootstrap spacing class.

**Yeah, yeah, I’m using bootstrap, I’m not a real web developer. Here you are, take this 🏔️ rock and throw it into me. I wasn’t even able to find real rock emoji, what to say about writing real CSS…

¯\_(ツ)_/¯

Result

Now I have a smooth scrolling effect, noice

It’s only the first step in a long trip of great UX, but I`m already happy with the very first result.

DevLog article created by Anton Vlasiuk

You can find me on https://www.linkedin.com/in/vlasiuk-anton/

Don’t forget to be awesome ;)