DEV Community: Sashe V.

A Handy Way of Building Reusable React Components (Inspired by Hemingway)

Sashe V. — Sun, 29 Jan 2023 13:33:48 +0000

Should we think about the reusability of our code all the time?

Some advise us to think about it only after we face the need for it. That means if we're creating a brand new component and don't know whether it will be used somewhere else, then we shouldn't try to make it reusable because that complicates our life (think "analysis-paralysis" and "premature optimization").

After all - we can't know the future, you know?

Well, I disagree with that!

I believe we should plan our work and set up the scene correctly so we can later improve it more easily. In real life, nobody likes to touch stuff that "works well as is," especially when there is a deadline and a bad legacy "smell."

So the tendency is to write "new and better stuff"…

Like it's supposed to be better just because it's newly created. But the harsh reality is that most of us are far from perfection, and what's good enough today will invariably become a "legacy" that needs to be improved by refactoring or replacing.

In Object Oriented Programming, the SOLID principles guide programmers and developers on how to plan (or refactor) their software for better design.

Although we'll talk about functional React components, a big chunk of the "philosophy" behind SOLID is also applicable in our case, so I strongly encourage you to investigate this topic further.

The main takeaway is that we can and should plan to create understandable, testable, maintainable, and reusable code.

It never happens by chance…

In a minute, we'll slice and dice one hardly reusable chunk of code into elegant React components, but before that, I will share with you my strategy for producing better results that I learned from a famous novelist.

What Can We Learn About Coding From Hemingway?

I'm totally convinced that making software is creative writing on a higher plane. So we can learn a lot about the process of "writing" from the great novelists of the past.

Hemingway once said to an aspiring writer:

"The first draft of anything is rubbish."

It's true in coding, too. Whenever I try to come up with the perfect component or function, that slows me down and makes me anxious.

That's why I always start with a "first draft."

I make the app to show me the component.

It should look as designed. And it should behave as planned. I don't think about quality, reusability, or testability in this phase. I write what comes first to my mind.

When it's on my screen, I switch to my editor again and start pondering how to make it better…

Let's take this for example:

import React, { useEffect, useState } from 'react';

export default function FeaturedPostsSection() {
    const [posts, setPosts] = useState([]);

    useEffect( () => {
        fetch("https://buhalbu.com/api/blog/featured")
            .then(response => response.json())
            .then(featuredPosts => setPosts(posts))
            .catch(error => console.log(error.message));
    }, []);

    return (
        <section className="blog-featured-posts">
            <div className="container">
                {posts.map(({slug, featuredMedia, category, path, title, author}) =>
                    <div key={slug} className="snippet">
                        {featuredMedia &&  <div className="snippet-img">
                          <img
                            src={featuredMedia.url}
                            alt={title}
                            width={428}
                            height={285}
                        /></div>}
                        <div className="snippet-img-overlay">
                            <a className="badge">{category.name}</a>

                            <a href={path}>
                                <h5 className="snippet-title">
                                    {title}
                                </h5>
                            </a>
                            <p className="snippet-text">{author.name}</p>
                        </div>
                    </div>
                )}
            </div>
        </section>
    )
}

The purpose of this component is to show a set of featured blog posts on top of the main archive page. It's not so reusable because it doesn't accept any props meaning that you can't customize it dynamically. Also, it's tightly coupled to my API and data structure.

If I don't need precisely the same featured post snippets somewhere else, then I can't reuse the section.
But no worry - it's just a shitty first draft.
How can we make it better?

After analyzing it briefly, I can see eight stand-alone React components.

Let's start with the easiest ones:

import React from 'react';

//First Step
const SnippetText = ({children}) => {
   return <p className="snippet-text">{children}</p>;
}

//Second Step
const SnippetText = (props) => {
    return (<p
            {...props}
            className={`snippet-text ${props.className}`}
        >
            {props.children}
        </p>);

};

//Third Step
const SnippetText = React.forwardRef(
    (props, ref) => {
        return (<p
            ref={ref}
            {...props}
            className={`snippet-text ${props.className}`}
        >
            {props.children}
        </p>);

    }
);

SnippetText.displayName = 'SnippetText';

export default SnippetText;

import React from 'react';

//First Step
export const Badge = ({children, href}) => {
    return <a href={href} className="badge">{children}</p>;
}

//Second Step
export const Badge = (props) => { 
    return (<a 
             {...props}
             className={`badge ${props.className}`} 
            >
            {props.children}
           </a>); 

};

// Third Step
export const Badge = React.forwardRef( 
    (props, ref) => {
        return (<a 
                 ref={ref}
                 {...props}
                 className={`badge ${props.className}`} 
                >
                {props.children}
               </a>); 

    }
);

Badge.displayName = 'Badge';  

export default Badge;

The components above are just styled HTML elements. By extracting them, we save ourselves from the effort of typing more code than needed. They are not a big win but illustrate the process well.

In step 1, we copy-paste the markup into its functional component;

In step 2, we adapt the component to accept all kinds of props that an HTML paragraph or anchor can take;

In step 3, we forward a reference (if any);

Let's see more:

import React from 'react';

export const SnippetTitle = React.forwardRef(
(props, ref) => { 
    const Title = props.as || 'h5';

    return (
        <a 
           ref={ref}
           {...props}
           className={`snippet-title ${props.className}`}  
       > 
            <Title>{props.children}</Title> 
        </a>
    );
});

SnippetTitle.displayName = 'SnippetTitle';

export default SnippetTitle;

This is also a simple one - it's the clickable post title that leads to the full text. As you might notice, I've made it slightly more reusable by adding the "as" property. That way, the title is not always H5, and it no longer has to be a heading at all.

And what about this one:

import React from 'react';

export const SnippetImgOverlay = React.forwardRef(
(props, ref) => {  
    return (<div 
             ref={ref}
             {...props}
             className={`snippet-img-overlay ${props.className}`}   
            >
            {props.children}
           </div>);  

});

SnippetImgOverlay.displayName = 'SnippetImgOverlay';

export default SnippetImgOverlay;

Here we extracted the container that holds the badge, the title, and the author's name. Now we can create an alternative element that doesn't make an overlay but places the three inner components below the image.

import React from 'react';

export const SnippetBody = React.forwardRef( 
(props, ref) => {  
    return (<div 
             ref={ref}
             {...props}
             className={`snippet-body ${props.className}`}   
            >
            {props.children}
           </div>);  

});

SnippetBody.displayName = 'SnippetBody';

export default SnippetBody;

Nice. Now let's extract the featured images into their own component:

import React from 'react';

const SnippetImage = React.forwardRef(
(props, ref) => {  
    const {src, alt, width, height, className} = props;

    return (
        <div 
            ref={ref}
            {...props}
            className={`snippet-img ${className}`}>  
            <img  
                src={src} 
                alt={alt} 
                width={width} 
                height={height} 
             />
        </div>
    );
});

SnippetImage.displayName = 'SnippetImage';

export default SnippetImage;

Ok, let's stop for a moment and put into use the new React goodies we've created.

What would the first code snippet look like?

import React, { useEffect, useState } from 'react';

export default function FeaturedPostsSection() {
    const [posts, setPosts] = useState([]);

    useEffect( () => {
        fetch("https://buhalbu.com/api/blog/featured")
            .then(response => response.json())
            .then(featuredPosts => setPosts(posts))
            .catch(error => console.log(error.message));
    }, []);

    return (
        <section className="blog-featured-posts">
            <div className="container">
                {posts.map(({slug, featuredMedia, category, path, title, author}) =>
                        <div key={slug} className="snippet"> 
                            {featuredMedia &&  <SnippetImage 
                                src={featuredMedia.url}
                                alt={title}
                                width={428}
                                height={285}
                            />} 
                            <SnippetImgOverlay> 
                                <Badge>{category.name}</Badge> 
                                <SnippetTitle href={path}>{title}</SnippetTitle>

                                <SnippetText>{author.name}</SnippetText> 
                            </SnippetImgOverlay> 
                        </div>
                )}
            </div>
        </section>
    )
}

It looks a lot better, doesn't it?

But we can extract at least two more components: One named Snippet that will wrap all the other snippet parts and one called "Section" that will hold a set of snippets.

Let's do it:

import React from 'react';

export const Snippet = React.forwardRef((props, ref) => {
    return <div ref={ref} {...props} className="snippet">{children}</div>;
});

Snippet.displayName = 'Snippet';

export default Snippet;

import React from 'react';

export const Section = React.forwardRef((props, ref) => {
    return (
        <section ref={ref} {...props} >
            <div>
              {props.children}
            </div>
        </section>
    );
});

Section.displayName = 'Section';

export default Section;

But why I'm creating this section component when I have FeaturedPostsSection?

Well, I want to decouple the presentation logic from the business logic. You may already know that there are three general types of components: Container, Presentation, and Higher-Order Components.

In our case, I'm extracting the JSX markup into its own functional component so it can be reused elsewhere.

For example, suppose I don't want to feature on my homepage blog posts but on website pages. In that case, I can create a new container component named "FeaturedPagesSection" and put all the other stuff we made without substantial changes.

Let's see the final result of our work:

import React, { useEffect, useState } from 'react';

export default function FeaturedPostsSection() {
    const [posts, setPosts] = useState([]);

    useEffect( () => {
        fetch("https://buhalbu.com/api/blog/featured")
            .then(response => response.json())
            .then(featuredPosts => setPosts(featuredPosts))
            .catch(error => console.log(error.message));
    }, []);

    return (
        <Section className="blog-featured-posts">  
                {posts.map(({slug, featuredMedia, category, path, title, author}) =>
                        <Snippet key={slug}> 
                            {featuredMedia &&  <SnippetImage 
                                src={featuredMedia.url}
                                alt={title}
                                width={428}
                                height={285}
                            />} 
                            <SnippetImgOverlay> 
                                <Badge>{category.name}</Badge> 
                                <SnippetTitle href={path}>{title}</SnippetTitle>

                                <SnippetText>{author.name}</SnippetText> 
                            </SnippetImgOverlay> 
                        </Snippet> 
                )}

        </Section> 
    )
}

Well, that looks fine for now. It's better than the initial code snippet. Maybe, in the feature, we'll need to improve it, but I consider it "good enough."

Brief Overview of The Applied Principles

So it took us 20 or 30 minutes more to transform a bad first draft into something that will make our life easier in the future.

Why?

Because we have got a couple of ready-for-reuse components, meaning we will write less code to achieve similar results. And all of them allow easier further improvements.
We put into use three general principles:

Separation of Concerns - We split the big component into several others of three types: Container, Presentation, and Higher-Order Components.
From Specific to Abstract - We climbed one or two steps up on the ladder of Abstraction, meaning we took some ultra-specific components (PostSnippetTitle, FeaturedPostsSection) and made them more abstract (SnippetTitle, Section), that way we can use them with different content entities (Posts, Pages, Products, Services)
Flatten Props - We chose to pass data through stand-alone properties and not as plain objects, that way, you know at first glance what data the component needs, and it's more convenient.

I hope you liked this tutorial. Please don't hesitate to ask in the comment section below if you have any questions.

Want to Connect?

If you enjoyed this article, there is some chance to enjoy the other free stuff I write on advanced JavaScript topics for my newsletter, too.

Check it out :)

What If “Burning Out” Is Our Soul Crying For Adventure?

Sashe V. — Sat, 07 Jan 2023 11:19:38 +0000

Dear Javascript Aficionado,

Do you feel bored sometimes when you follow your daily routine?

Work — Party — Sleep… Work -Party — Sleep…

That’s one hell of a cycle!

And if you’re a family guy or hard-core introvert, then probably the middle of this cycle is missing.

So it becomes even more monotonous…

There is no surprise that so many of us fall victim to this nasty condition, “burnout.” And it’s no joke… I’m “lucky” to experience its gray nuances and depressing feelings somewhat more frequently than average, so I know it’s no joke.

In the past, it made me do things I still regret, like quitting a fantastic job or leaving behind a profession just before it starts paying off big.

So I had to find a way to counter this condition. And counter it before the slightest sign of its symptoms.

And I found many!

I found a plethora of ways to keep myself on track. They help me finish big projects, persist in my long-term goals, and live a hundred times more exciting life than before.

We’re not talking about extreme sports, screwing around, or substance abuse, though (in my opinion, constantly drinking beer or whisky is not a productive way to save yourself from burnout).

Anyway…

I mention one of my latest “remedies” in my newsletter article “Roadmap to Success: 3 lessons I learned from 61 of the most influential JavaScript developers”. Almost all 61 developers practice it (83.6% of the researched ones). And even the thought of it can shake your whole body.

Imagine how intense it can be when it happens for real.

And that’s not the only benefit…

It offers traveling to exotic destinations (sometimes for free), meeting lots of interesting, smart, sexy people, and true challenges that the crowd may talk about for years.

What’s best — all this involves web development.

I have yet to experience this kind of adventure on a big scale. It’s not something you can do when you decide to do it. You need to prepare yourself. You need time and many additional skills. But that’s precisely why it is so exciting.

It’s part of the game…

What game?

The public speaking and presenting on JS events & conferences game, of course ;)

It really can be that fun!

What do you think? Can this reignite once again the passion for JavaScript development?

Be Happy,
Sashe

Should You Focus on JavaScript or WordPress?

Sashe V. — Sun, 23 Oct 2022 18:09:02 +0000

It depends on your preference...

I have been focusing on JavaScript for the past 2 years, and I'm totally satisfied with my decision to switch from PHP/WordPress to JavaScript/React.Js/Next.Js.

Don't get me wrong!

I really love PHP and WordPress... I built many awesome projects with these technologies. Still, before I switched, I was constantly worrying about PHP losing ground as a preferred backend choice.
This programming language is strongly specialized for server-side scripting.

And it constantly gets improved...

The thing is, many other languages like (Node.js/Python/Golang) have entered the competition in that area and are stealing market share. If you check PHP in Google Trends, you will notice it's losing popularity.

On the other hand, some people say WordPress powers nearly 40% of all websites. So there are many opportunities here: from making and optimizing websites to distributing themes and plugins.

You will never be hungry if you become a decent WordPress developer.

Moreover, as more and more people hop on the JavaScript and Python "bandwagons," there will be increased demand for PHP developers, and the salaries will start growing.

But bear in mind that not many cool projects use those technologies. You will handle a lot of legacy code, and the "wp style" of coding is uber quirky. It still needs to catch up with the PHP Standard Recommendations (PSR), any proper OOP concepts, etc.

So if you want to write modern, clean code for a rising startup... using a programming language on the crest of the wave...

Then WordPress shouldn't be your primary focus.

You should focus on JavaScript…

Next.Js Security: Ooh, You Aren’t Supposed To Access That

Sashe V. — Fri, 14 Oct 2022 05:43:57 +0000

Dear Next.js Afficionado,

Are you aware that there are bad people who make money by getting access to expensive stuff like online courses, software, etc., and later reselling them for peanuts?

What shm**ks, right?

So if you have valuable files that you want to give away to subscribers or customers only, then you need to protect those files.

For example, let’s say your employer creates a detailed guide that helps the customers solve a specific problem. They want to put this guide on the website and collect emails in exchange for it.

So how do you stop the bad actors from getting its URL and putting it on social media, blogs, forums, and other public online places?

That’s the topic of my newsletter this week…

I wrote for a similar use case where I needed to restrict access to a free template.

So if you are interested, click here and discover the following:

Three feasible ways to protect a file
How to choose the proper protection
Lots of code snippets
Why you should never put valuable files in Next.Js’ public folder
What’s a “signed URL,” and when it’s useful

This newsletter issue almost hits the 1000-word mark, so if you’re not in the mood for heavy reading… don’t have time… or opened this email on your smartphone, then you can bookmark it for later.

It’s not super urgent. Just the typical stuff every geek likes to read about.

Be happy,
Sashe Vuchkov

Next.Js Crowd: See Who Talks About The React Framework

Sashe V. — Fri, 26 Aug 2022 12:50:00 +0000

Overview of Next.Js Crowd

It's an app that monitors Twitter for users who mention the react framework Next.js. It constantly collects tweets and user data, creates curious stats and then rank them by a "Score".

Every elligible tweet, user or stat JSON document is recorded in a Redis database. Later, when a visitor opens the app, it fetches those documents to show them.

You can find the repo here...

You can find a working demo of the app here:
https://nextjs.buhalbu.com

What technologies did we use to build it?

We used TypeScript, Next.Js, and Redis, as well as HTML and CSS for the front-end part.

Here's a diagram of the architecture:

So the app works in two primary modes. We have a scheduled job that emits messages every two minutes. Our app listens for those messages, and on every message, it "asks" Twitter whether there are new tweets with the desired keyword next.js.

If there aren't any new tweets, then everything is cool, and that's the end of the story.

If there are new tweets, the app processes them by mapping their data to our internal data types, and it calculates their "scores" that it later uses to rank them by popularity.

In the next step, the new data is saved in a Redis Database as documents. We use the awesome RedisJSON module.

Then the app gets a JSON document from Redis with the current day's general stats. It updates those stats and saves them.

That's the final step.

In the second mode, the app is accessible on the web. When a web visitor opens it with their browser, it fetches data from our Redis database, generates the response, and then sends it back to the browser.

Now the web visitor can see either a list of ranked Twitter users or a list of ranked tweets.

Submission Category:

MEAN/MERN Mavericks

App Video Overvew

Language Used

JS/TS/Node.js

Link to Code

SasheVuchkov / nextjs-crowd

NextJs Crowd monitors Twitter for users that mention the react framework Next.js and it shows some daily stats like "top users", "top tweets", etc

Next.Js Crowd - Who's Talking About Next.Js?

It's a simple app that monitors Twitter and detects users that mention the react framework Next.js. The point is to collect all their tweets, process their public metrics like the number of likes, retweets, and replies, and finally, rank the discovered users by a score.

Overview video (Optional)

Here's a short video that explains the project and how it uses Redis:

[Insert your own video here, and remove the one below]

How it works

If there aren't any new tweets, then everything is cool, and that's the end of the story.

If there are new tweets, the app processes them by…

View on GitHub

Additional Resources / Info

TypeScript - JavaScript with syntax for types.
https://www.typescriptlang.org/

Next.Js - The React Framework
https://github.com/vercel/next.js/

React.Js - A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://github.com/facebook/react

Bootstrap5 - world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
https://getbootstrap.com/

twitter-api-sdk - A TypeScript SDK for the Twitter API
https://github.com/twitterdev/twitter-api-typescript-sdk

Redis Om for Node - Object mapping, and more, for Redis and Node.js. Written in TypeScript.
https://github.com/redis/redis-om-node

Feather – Simply beautiful open source icons
https://feathericons.com/

App Screenshots

Collaborators

Maureen Ononiwu, backend developer
https://dev.to/chinwendu20

Sashe Vuchkov, full-stack developer
https://dev.to/sashevuchkov

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Introducing Next.Js Crowd

Sashe V. — Wed, 10 Aug 2022 15:35:00 +0000

Hi :)

"Next.Js Crowd" is our (Maureen Ononiwu & Sashe Vuchkov) hackathon app we're building for RedisHackathon.

It monitors Twitter for users that mention the react framework Next.js and shows some daily stats like "top users," "top tweets," etc.

Here's a small demo of the interface:

https://www.youtube.com/watch?v=dgFq72X7mio

You can follow the making of the app by watching this GitHub repo:

https://github.com/SasheVuchkov/nextjs-crowd

Cheers,
Sashe Vuchkov

Setting Up a Next.Js Project The Proper Way

Sashe V. — Mon, 01 Aug 2022 15:31:00 +0000

//Note: Watch the video here

Dear Next.Js Aficionado,

Until now, we’ve talked about what your portfolio website should look like and that web developers aren’t web designers, so they need ready-to-use templates if they want to create something beautiful.

We analyzed some examples of good portfolio websites and chose an HTML template or UI kit.

Now, it’s time to set up our project.

Installing Next.Js Fast & Easily

Hopefully, the guys behind this framework have made it super easy for us to install it and get going.

We just open a new terminal, navigate to the parent folder where we would like to create our project, and we run the following command:

npx create-next-app@latest

Ok, let’s open the project in our favorite code editor.

As you can see, we have several files and folders in the project folder.

I’m going to review them briefly…

First, we have a node_modules folder. It’s the home of all the third-party libraries we will install in the future. Every time you install something – let’s say caching library for optimizing the number of requests your app makes to external API – the library files will be downloaded and saved in their folder under node_modules.

Next, there’s a folder named public.

It’s the preferred place for all the files we want to be freely accessible.

For security reasons, we want most of our project files not to be freely accessible. But some static ones like images, SVG graphics, fonts, and others are meant to be public, so their proper place is in this folder.

We also have a folder named styles…

Here is the home for all of our CSS files. There’s a globals.css in there. Here we put styles that apply to many components and the app. And, of course, we can create a CSS file for every component we make.

And finally, we have the pages folder…

Here we put all files that represent individual pages of our website. So our website’s index page is this one. If we open it, we’ll discover a standard react component named Home.

If we want to make an “about me” page, we can do it by creating a new javascript file named about-me.js.

Now, if we run the application for testing purposes with npm run dev…

We can open that page in our browser.

In a later video, we will talk more about how routing happens in Next.js, but it’s simple as that. You create files that represent pages, and they just start working in your browser.

Short Review Of The Project’s Files

Ok, we’ve talked about the available folders. Let’s review the available files for a minute.

We have a yarn.lock file. It’s generated by the javascript package manager Yarn — obviously, this package manager is the preferred choice of the guys behind Next.js.

Let’s install it and start using it instead of npm.

We run the command: npm install -g yarn. I already have it installed, so nothing changed on my side. But if you didn’t have it on your computer, now it’s available.

We’ll use yarn from now on.

So the yarn.lock file is a special file that we never edit. It’s managed by the package manager, and it holds information about the third-party libraries we’ve installed, their dependencies, and their exact versions.

The idea is that if we want to run our app on a machine different than ours, let’s say on a server; then we’ll copy all app’s files and folders except node_modules.

Often this folder is huge. It is huge in size and the number of files, so if every project on a platform like GitHub has it around, it will need more storage space.

Because the files there don’t change from project to project, they don’t get uploaded.

Instead, every time we install our app on a new machine, they get downloaded anew.

To download the exact same files, we need a list of them; thus, we have a yarn.lock.

Besides it, we have a packge.json file. It’s something like a human-readable register of all project dependencies. Here we define the project’s name, version, and custom scripts, etc…

Let’s talk about them for a moment…

If our app is ready to go online, we need to build it, so we run the command:

yarn build

It starts to bundle the files, minify them, and do its other magic that makes Next.Js such a good React framework.

When it’s finished building, we can start the app just like it will be started in a production environment by running the command:

yarn start

But while we’re developing our app, we’ll not build it if we want it running.

We’ll use the command:

yarn dev

Now we can make changes, create new files and apply new CSS styles, and everything we do will be visible in the browser right away, thanks to the so-called “hot-reload” feature of Next.js.

And what about the script named “lint”?

It’s a really useful one. But what is it?

“Linting” your code is the automated process of analyzing it for obvious errors that can be detected without running it. Some errors happen only on run time, so no machine can notice them beforehand, but others can be caught just by mechanically applying the language’s rules.

So when you run the command yarn lint, your code gets analyzed for warnings and errors. Let’s see what happens if there is an error…

I will add an anchor, but I will miss on purpose to properly close the tag.

Then I will run the command…

As you can see, it successfully detected the missing closing tag.

If you’re curious about the rules, you can find them all on this documentation page.

Ok, enough discussing the package.json file.

What about next.config.js?

It’s a js file that holds configs related to Next.js.

I not gonna tell you what you can put here because you won’t remember it. I don’t remember myself.

Basically, if you need to configure the framework in some specific way, you read the official documentation.

Right now, we don’t need to change anything, so we’ll leave this file unchanged.

The .eslintrc.json file is the place to configure ESLint. For example, let’s say you want a style tag in your component. A rule states you can’t put it there, but you can turn it off by adding it right here with a value of “off.”

And finally, we have a README.md. It’s self explementary what we use it for, so I won’t waste time talking about it. If your repository is not public, perhaps you don’t need such a file.

Ok, that’s it…

It turns out it’s pretty easy to install Next.js and start coding. That’s why I love it and use it for almost every project. In the following video, we will finally begin coding. We’ll take the HTML template we chose earlier and turn it into a Next.Js template.

Let’s wrap up this section:

We installed Next.Js and the package manager yarn
We reviewed the project structure – its folders and files
And we talked about the available scripts in package.json

Cheers,
Sashe Vuchkov

PS. This tutorial was originally published on buhalbu.com

A Shortcut To A Superb Portfolio Website With Next.Js

Sashe V. — Tue, 26 Jul 2022 12:59:00 +0000

//Note: Get the video version of this section

Dear Next.Js Aficionado,

I know you can’t wait to start coding. In the end, we’re web developers, and we love doing it.

And yet, here we are…

This tutorial is the third installment of my series for building a superb portfolio website, and I still don’t have an intention to make you open your favorite code editor.

We’ll do that the next time…

When we’ll set up our Next.Js project for success.

But now I want to talk with you about one common big mistake. It’s so widespread that even sessional professionals fall victim to it no matter their high achievements or years of experience.

Once they go for their own website, often they create something ultra-functional and well-coded, but something with…

ZERO marketing or design value

That happens because we like to think of ourselves as extraordinary guys who can handle every possible challenge related to web development.

But that’s far from the truth…

We’re web developers, but we aren’t DevOps engineers, web designers, UX experts, SEO specialists, etc.

So by trying to be one of these, too – web designers, for example, we’re making a big mistake that leads to a not-so-visual-appealing website. Not that the world has never seen a specialist who is both a web developer and a web designer, but most often, that’s not the case.

That’s not the case when we’re talking about me…

And if that’s not the case when we’re talking about YOU, then we must approach the design challenge more strategically…

How To Approach The Design Challenge More Strategically

We’ll use a template!

Now, there is a fad to search for a template that matches your choice of technology. For example, “react templates,” “nextjs templates,” and so on.

You should know that a template advertised like created for Next.Js can often have a low code quality. It’s beautiful, but it’s not appropriately sliced into components and pages, so you will need to do a lot of refactoring.

It’s better to get an “HTML template” or “UI Kit”…

If you have some dollars to spend, I advise you to do it. The Internet is full of free templates, and you can definitely find something worthy (after a lot of browsing), but you’ll have a way bigger choice if you go the paid route.

Anyway…

I will use a free HTML template.

I liked the one named “Ollie” on page 3 of free-css.com. It’s not quite what I need as a website structure, but I like it as a visual appeal.

So I’ll use its visual appeal and structure my new website like sashevuchkov.com and/or robinwieruch.de. That means I will still need to develop custom components and sections that are not part of the template, but it will be easier than creating everything from scratch.

In the following tutorial, we’ll set up a Next.JS project the proper way, and in the tutorial after it, we will start planning our components and pages.

So stay tuned.

Let’s wrap up what we talked about:

One big mistake that leads to many plain ugly websites
The right way to approach the web design challenge before us if we’re not web designers
And how to find a good HTML template or UI kit

Cheers,
Sashe Vuchkov

PS. This tutorial was originally published on this page...

What Should Your Superb Portfolio Website Look Like For The Best Results?

Sashe V. — Mon, 25 Jul 2022 09:27:00 +0000

//Note: Watch The Video Version Here

Dear Next.Js Aficionado,

There are fabulous portfolio websites, and there are some plain ugly ones. There are "arty" ones. Minimalistic ones. And so on, and on.

Web developers are especially keen on building "out of the ordinary" projects. Sometimes they do it on purpose. More often, it just happens that way because the developer didn't prepare well.

Didn't write their homework...

As I mentioned the last time, we are about to build a SUPERB portfolio website for you that:

Helps you get the best job offerings
It makes you look cool in other people's eyes
And that works for you 24/7.

But first…

What do I mean when I'm saying "SUPERB"?

That's the question I answer with this short tutorial.

I will start answering by showing you a couple of good examples. I won't show you bad ones because I want to imprint in your mind the proper "end result," and I don't wish to pick on someone and make them angry.

Example 01: The Website Of Josh Comeau

Let's talk for a minute about joshwcomeau.com.

I like this one a lot because it's arty and full of content. Right away, you can tell that its owner knows what they're doing well. Although it's not a "portfolio," it's one of the best personal websites I've ever visited.

The homepage is a simple one. It shows the latest blog posts, which help the author build some authority in the eyes of the visitors.

By reading a few of the latest entries, the reader concludes that Josh Comeau is not a skillful web developer only, but they are a really knowledgeable and good communicator.

The last one is important if you want to get ahead quickly in your career.

Often the wild success isn't a matter of technical skills but a personal brand and soft skills.

Example 02: The Website of Robin Wieruch

The next one comes from Germany. It's a good primer for a "marketing machine" that helps its owner achieve career and business success.

The website has a complex homepage...

It welcomes the user with a beautiful picture of a desert, plus the web developer's name.

Right below it, we find a picture of Robin, their short bio, social media profiles, and a call to action "GET TO KNOW ME BEFORE YOU DIVE INTO MY CONTENT."

The next page section is titled "What I Offer."

Not every portfolio website needs to talk about "offers." We can replace that section with a "My Skills" or "My Philosophy" Section and put the same cool-looking snippets with icons that briefly mention more information about us.

Below "What I Offer," we find a "Portfolio " section. Robin Wieruch is really productive, so they list here not individual projects but CATEGORIES of projects.

We can start with individual projects and later transition to listing categories.

And the last important section of the homepage is titled "Vita." It's a sleek vertical timeline that lists some major life events of the site's owner. I consider it to be "the cherry on the cake."

Example 03: My Portfolio Website

My portfolio website is something I created recently without much thinking about it. I used WordPress, and I didn't optimize it for better performance.

It took me 4 hours (blog posts not included). I needed something quick to "mark my place on the internet."

In the past, I had several freelance websites under different domains, which were way more sophisticated, but they aren't online anymore.

Anyway…

I'm showing you sashevuchkov.com, not because of the used technology.

WordPress, not Next.Js, powers it.

I'm showing it to you because of the website structure and the content.

It has a complex homepage that welcomes the user with a playful message:

Then it introduces me:

Then it talks a little bit about my country of origin:

"I live in Sofia, the capital of Bulgaria – a crossroad where Western Pragmatism meets Eastern Wisdom.

So we are always on the fence…
Drinking wine and listening to melancholy songs in a desperate attempt to forget about the inevitable and painful fall that constantly threatens us but actually never happens."

Just below, it mentions my core skills:

Then it talks about my working process and finally, it lists some links to my blog posts

Cool right?

How should your superb portfolio website be structured?

You will notice some commonalities if you analyze Robin Wieruch's website and mine. Both have complex homepages about the web developer - their skills, projects, blog posts, etc.

Both have dedicated blog archive pages, and both of them showcase some past or current projects.

That's how your portfolio should be structured and look.

And one more thing...

No matter your next project - never start from a "clean slate." Use the strategy I've just demonstrated to you in this article.

Find some good examples. MODEL, but not COPY, the best part of them… and you will never again struggle to produce something above average.

In the following video, I will share a shortcut to a website of equal or better quality. It will look fast and sleek. High-grade, professional asset.

So stay tuned…

What did we talk about in this tutorial?

Three good examples to learn from
Why do I consider them good examples
A strategy that will help you always produce above-average stuff

Cheers,
Sashe Vuchkov

NextJs Tutorial: The Full-Stack Story Of Building Your Superb Portfolio Website

Sashe V. — Mon, 25 Jul 2022 02:04:00 +0000

//Note: Watch the video version here

Dear Next.Js Aficionado

If you want to build an amazing portfolio website that’s beautiful and looks professional…

A website that helps you get the best job offerings and makes your friends a little envious of your high skills to create such valuable “assets” from start to finish, then the following few paragraphs will be the most important thing you’ll discover today.

I’m starting a tutorial series to share all my knowledge on creating websites and making them work for you 24/7.

My most recent CV tells the story of a web developer with three years of professional experience, but I’ve been building sites since 2006.

Mainly for personal needs…

And now I’ve decided to talk about the ups and downs, the easy stuff, and the hard stuff. The pitfalls, the omissions, the errors, the failures, and, of course, the success I’ve experienced.

What can you expect from this tutorial series?

We will make a plan that will lead us to the best portfolio website
We will learn how to set up our Next.JS project for success
We will use a lot of React.Js to create reusable components and pages
We will integrate Firebase as a home for the content of our website
We will learn about Markdown and how to use it to publish well-formatted articles
We will use Firebase to implement some basic user authentication
And finally, we’ll deploy our website on Vercel, so it’s accessible to all
We will create a truly amazing portfolio website, and we have a lot of work to do, so let’s get our hands dirty…

First, it’s important to define our stack

This exhaustive tutorial focuses on demonstrating how to use Next.Js properly. But Next.Js can’t be used in isolation. There are some prerequisites that you need to have before you accept the challenge.

It would help if you had a clear understanding of HTML, CSS, and JavaScript. These are non-negotiable. Everything we will do is built on top of these technologies, and if you’re a total novice, I strongly advise you to put this tutorial for later.

Learn the basics and then come back.

The purpose of your portfolio website is to help you get the best job offerings, but no matter how good is it, you will fail to get hired if you don’t know the basics.

So first things, first.

Next, we will use React.js

You can definitely learn this JavaScript library while creating your portfolio. Next.Js is a react framework, so there’s no reason to delay using it. You can master them both at the same time.

And finally, there is a right and wrong way to set up your project. There is a right and wrong way to approach the creation of a website. There’s much stuff that only a pro with years of experience can know about.

I have created many websites with a plethora of technologies. I have been playing this game for years, so I clearly understand what the “end result” should be and will gladly share everything I know with you.

In the following video, we’ll apply some “project management.”

I’ll reveal a strategy to help you discover what your website should look like. We’ll plan its structure, sections, navigation, and DB document types. And I will explain why we’re doing what we’re doing.

Ok. Let’s wrap it…

We talked about what you can expect from this tutorial series on building your portfolio website
We talked about the stack and prerequisites you need to complete the project successfully
And we talked about some of my experience that allows me to share with you “insider stuff.”

Cheers,
Sashe Vuchkov

Super Easy & Profitable “Pro Hack” For Amazing Websites With NextJs

Sashe V. — Thu, 21 Jul 2022 21:52:00 +0000

Dear Next.Js Aficionado,

So you wanna build a beautiful website, right?

A website that shows your high level of web development skills and one that helps you get the best job offers or freelance gigs, or that attracts users for your cool app.

Nice, we all want that!

But often we don’t get it because we make a common big mistake.

It’s so widespread that even sessional professionals fall victim to it. No matter their high achievements or their years of experience. Once they go for their own website, many times they create something ultra-functional. Something well-coded.

But something with...

ZERO marketing or design value

It’s just plain ugly.

No offense, but we – all web developers, must learn that we’re not some extraordinary guys who can handle every possible challenge in the world.

We’re not superhumans!

Anyway.

The point is – we’re not web designers. We’re not UX experts either.

So we shall not try to be one!

The “super easy and profitable pro hack” is to start working with web designers or at least – use professional templates. You will see a drastic improvement in your ability to put online fast whatever projects you want that make you look BIG POTATO in the industry.

It’s not criminal to be a small potato, though…

But why be one when you have all the opportunities you need to look larger than life?

And the best part?

You can get wonderful free HTML templates right now! The internet is full of them.

Just pick something beautiful and turn it into a piece of Next.Js art.

Cheers,
Sashe Vuchkov

PS. I offer a free template, too. It’s nothing fancy, but I put in it all of my marketing knowledge. The knowledge that inundates me with job and partnership offers to this day.

If you’re curious about how I structure my own portfolio websites for maximum success, you can download it on Gumroad in exchange for your email.

Next.Js Adventures: How a Couple Of Embedded YouTube Videos Screwed My Performance Scores

Sashe V. — Thu, 14 Jul 2022 18:29:16 +0000

Dear Next.Js Aficionado,

Recently I’ve been working hard to prepare my humble startup for a ProductHunt launch.

So the other day, I decided that the homepage needs a couple of videos that show the app in action. I don’t have a budget for fancy stuff, so I made three screencasts, synced them with cool music, and uploaded them on YouTube.

Later, I embedded the videos on the page.

Obviously, some old lessons I had learned years ago were forgotten.

The next day I was preparing another screencast when I was surprised by this “nice view”:

I was stunned…

It was not how I left the page. The last time I checked, everything besides PWA was colored in green.

So I started debugging, and right away, I noticed the cause for those bad scores was the embedded YouTube videos.

What an embarrassment!

I was claiming I knew something about Technical SEO and how to achieve better website performance, and I failed to foresee the awful impact those videos would have on my webpage.

Anyway…

After some research (a.k.a googling) and some creative pondering, I’ve come up with the following react component:

import {useRef} from 'react';

export type Props = {
    video: string;
    width: string,
    height: string,
    thumbnailQuality: 'default' | 'hqdefault' | 'mqdefault' | 'sddefault'
}

export default function YouTubeFrame({video, width, height, thumbnailQuality}: Props) {
    const divRef = useRef<HTMLDivElement|null>(null);

    const onClick = () => {
        const iframe = document.createElement( "iframe" );
        iframe.setAttribute( "frameborder", "0" );
        iframe.setAttribute( "allowfullscreen", "1");
        iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
        iframe.style.width = width;
        iframe.style.height = height;
        iframe.setAttribute( "src", `https://www.youtube.com/embed/${video}?rel=0&showinfo=1&autoplay=1` );
        if (divRef.current) {
            divRef.current.innerHTML = "";
            divRef.current.appendChild(iframe);
        }
    }


    return (
        <div ref={divRef} className="youtube-frame position-relative">
            <span onClick={onClick} className="ti-control-play position-absolute display-1 text-white" />
            <Image onClick={onClick} src={`https://img.youtube.com/vi/${video}/${thumbnailQuality}.jpg`} alt="YouTube Video Thumbnail" width={width} height={height} className="shadow" />
        </div>
    );
}

As you can see, the component accepts the video slug, the preferred thumbnail size, and the desired dimensions as parameters. Instead of embedding the video right away, I’m putting a placeholder (its thumbnail), so the video’s iframe is appended only after a click on that placeholder.

It’s nothing genius, but it did restore the balance in the universe…

This case study is evidence that Next.Js is an “SEO-friendly” framework but not “SEO-ready.”

We, as web developers, have plenty of room to screw things, so we must be careful. We must measure the performance of our website every time we’re about to make substantial changes. And we must measure it after the changes.

This additional monitoring is the only way to know the real impact of our work.

Cheers,
Sashe Vuchkov

P.S. If you want to view the screencasts I made, just visit BuhalBu’s homepage…