Most web pages have a contact form. Here is a simple guide on how to create your own.


Most webpages have some contact form, usually not very fancy and the backend behind it can be SalesForce, any other variation of lead generation software but usually it just sends email. 

Sending emails is not trivial, you need to have an SMTP server and that alone will add to your costs. Fortunately, we live in an age where everything is a service and API. There are tons of services that can send emails to you. My goal was to do it as cheaply as possible (preferably for free). I was expecting at most about 5 emails per day.

After some research, I decided to use [Send In Blue](https://www.sendinblue.com/). Their free plan has 300 emails per day (more than enough for me), you do not need a credit card to sign up, no DNS shenanigans and their API is very straightforward. 

## API endpoint in NextJS

NextJS offers a friendly and easy way to create API endpoints from where you can call any external APIs without actually exposing your secret keys to the browser. 

I got the API key from Send in Blue with the help of this awesome [help page](https://help.sendinblue.com/hc/en-us/articles/209467485-What-s-an-API-key-and-how-can-I-get-mine-), and add the key into my .env.local file.

```bash
NEXT_PUBLIC_SEND_IN_BLUE_KEY=xxxxapikeyxxxx
```

I also put the key into the Vercel Environment variables manager with the same name. 

I created a new file api/email.js from where I will send the email via Send In Blue API.

```javascript
const sendInBlueKey = process.env.NEXT_PUBLIC_SEND_IN_BLUE_KEY

export default async function handler(req, res) {

    const body = req.body

    const resp = await fetch('https://api.sendinblue.com/v3/smtp/email', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'api-key': sendInBlueKey
        },
        body: JSON.stringify({
            "sender":{  
                "name": body.name,
                "email": body.email
             },
             "to":[  
                {  
                   "email": "myemail@ppolivka.com",
                   "name": "Pavel Polivka"
                }
             ],
             "subject":`Contact Form Eamil From ${body.name}`,
             "htmlContent":`
                <html>
                    <head></head>
                    <body>
                        From: ${body.name} <br/>
                        Message: ${body.message} <br/>
                    </body>
                </html>
            `
        })
    });

    res.status(200).end()
}
```

From the form, I am getting the name and email of the sender and a message. I am sending that (the sender is the email from the form) to my email address so that I can reply to my email client. 

## Contact Form

Then I created a contact form component. It's a simple form with three fields and the submit button. All the sending magic is happening in the handleSubmit function. 

```javascript
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import {useState} from 'react';

export default function Contact() {

    const [send, setSend] = useState(false);

    async function handleSubmit(event) {
        event.preventDefault()
        const data = {
            email: event.target.email.value,
            name: event.target.name.value,
            message: event.target.message.value,
        }

        const JSONdata = JSON.stringify(data)

        const endpoint = '/api/email'
        
        const options = {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSONdata,
        }

        const response = await fetch(endpoint, options)

        setSend(true)
    }

    let content;

    if (send) {
        content = <>
            <p>Thank you for contacting me!</p>
        </>
    } else {
        content = <>
            <form onSubmit={handleSubmit}>
                <TextField id="email" label="Email" variant="outlined" required />
                <TextField id="name" label="Name" variant="outlined" required />
                <TextField id="message" label="Message" variant="outlined" required multiline rows={4} />

                <Button variant="contained" type="submit">Send</Button>
            </form>
        </>
    }

	return (
		<>
            {content}
        </>
        );
}

```

I am using React Material UI, but you can use any UI or just normal inputs.

This is all you need. Simple and elegant. It was done in an hour.

Good luck coding. 

How to create simple email form in your NodeJS website

Have you ever wondered if we need all the new and fancy productivity apps out there? Are they really helping us or enslaving us? 


If you look at Medium, Twitter, or any other platform where many developers hang out you will see an obsession with productivity tools, apps, etc... Everybody is praising the latest shiny apps that will make you a productivity god. 

Did we ever stop and asked do we really need all of these apps? I have a busy work schedule and trying to manage that and still have some quality time with my family. So I naturally tried to be as much productive as I can. I downloaded almost all the apps that are in the talks. Tried them in the belief that they will help me with all my issues with time management, not enough time, and joggling all the tasks I need to complete. 

Well, I am here to report that it does not work. You actually lose a lot of time trying to use the tools. 

Take Obsidian for example. In theory, it's a very cool idea. Have all the notes in one place, interconnected with links between each other. Your second digital brain. Did somebody actually manage to keep a decent size library of all their notes with the links in all the places? When I am writing down a note I actually need to know what are my other existing notes to create a link to them. That seems stupid. Like really, really stupid. The chart showing the relationship between the notes looks impressive in the demos and videos but is it useful? What do you actually gain with it? Maybe just maybe, it's all just a bunch of fluff that will get you nothing. 

For me, the best solution for note-taking is basically a bunch of text files and an easy solution in full-text search in those. Wau, that sounds great and useful. What app does that? That is the beauty of this. You do not really need an app for this. It's part of your OS. You just put a bunch of text files in a folder and use Windows search or Apple Spotlight. 

Sure it's low tech. Sure it does not really work on phones. Do you really need all your work notes on the go?  What is all the obsession with having everything synced and on the go? Do you really need your notes on how to restart a production server when you are grocery shopping? Do you need them on your phone at all? For productivity's sake, you should not really look at your phone when you work anyway. For the notes you need to have on the go you can use your phone notes app. What kind of notes do you need on the go? Maybe a list for your shopping, some measurements, etc... The notes app on your phone is more than capable of doing that. 

Another productivity giant is Notion. I never figured out what people really see on it. It's a bunch of templates for markdown files and kanban boards. Plus it's really sluggish and slow to use. Not to mention finicky. It's the most over-engineered solution for your notes and todos. What is the real need for kanban outside of some specific work use cases (and even there it's more or less questionable)? Do you really need to know that your window cleaning is not in progress? What is wrong with just a normal to-do list? If you have that many to-dos that you need to have them organized in some other way than just a plain list, you have a problem with delivering or overcommitting, not with the organization of your tasks. 

I tried a lot of different to-do list apps. Some better some worse. I always came back to just writing my todos down on paper. It forces you to keep the list small and manageable. Plus you know, it feels fancy.

In the end, you use what you are comfortable with I will stick with my pile of text files, simple notes app, and paper.

Do you really need fancy productivity apps?

What is in my bag? What is in your bag? What is in the bag?



As a new year article, I decided to write up some words about what are the daily drivers I have in my bag. 

## Bag
 
I use a top-loaded HP bag for 15-inch laptops. My 17 inch Mac Book fits it well and it's pretty nice. But nothing special. 

## Laptops

I have multiple laptops. For my work, I mostly use Macbook Pro 17" - 16GB RAM, 2019 model. I also have Macbook Air 13" M1 model I use for my personal projects. I also got a few Windows and Linux machines but those are rarely used.  

## Other electronics

I carry Kindle Whitepaper 4 with me almost everywhere. I love reading.
I also carry Jabra Evolve 75 I use it for work meetings. It's a really great headset. I also have Marshall Mode II true wireless for music and or audiobooks on the go. I love the Marshall sound. 

I also have some USB/USB-C cables and some USB-C dongles. Fully embracing that Mac dongle life. 

## Drug store

I have deodorant in spray, hand sanitizer, mouth deodorant, and glass cleaning gel. Nothing special. 

## Various 

I have my Moleskin notebook, Parker pen, FFP2 respirator, chopsticks, and set of lockpicks. I have lockpicking as one of my hobbies I rarely use those but saved me calling locksmith more than once. 

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).

What is in your bag?

How to render react components when rendering your markdown files. 


As I decided to create my blog I choose Next.js as my framework of choice, as a backend I use markdown files stored in a git repo. 

To render my files I use [React Markdown](https://github.com/remarkjs/react-markdown). It's an awesome component that can render markdown files without any config.

After a few posts, I figured out that I need some custom components rendered with my posts. One was for images, to make them zoomable for phones and the second one was a syntax highlighter for code snippets. 

React has a huge amount of components that can help us with both of these. I decided to use  [react-zoom-pan-pinch](https://github.com/prc5/react-zoom-pan-pinch) for image zoom and [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) for syntax highlight.

Ok. I have my components, not how to render them from our markdown files. Fortunately, React Markdown has us covered. It allows us to do a custom rendering of some tags. 

We can do something like this:

```javascript
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

<ReactMarkdown
    components={{
        p: ({ node, children }) => {
            if (node.children[0].tagName === "img") {
                const image = node.children[0];
                return (
                    <TransformWrapper>
                        <TransformComponent>
                            <img
                                alt={image.properties.alt}
                                src={`${image.properties.src}`}
                            />
                        </TransformComponent>
                    </TransformWrapper>
                );
            }
            // Return default child if it's not an image
            return <p>{children}</p>;
        },
        code({ className, children }) {
            // Removing "language-" because React-Markdown already added "language-"
            let language = "";
            if (className) {
                language = className.replace("language-", "");
            }
            return (
                <SyntaxHighlighter
                    style={materialDark}
                    language={language}
                    children={children[0]}
                />
            );
        },
    }}
>
    {postData.contentMarkdown}
</ReactMarkdown>
```

For images, we must hook into <p> tag, as ReactMarkdown is wrapping images in paragraphs. So with a simple if we decide if the first child of the paragraph is an image. If so we replace the whole thing. 

For code, we are just replacing the whole code tag.

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).

React Componenets in Markdown articles

This article will go over making a dynamic Twitter header.


Recently I saw a Twitter header that displayed images of new followers dynamically. I fell in love with this idea so I decided to create my own. 

It should be simple, I will just write a simple script that will take a background image, via Twitter API downloads list of followers, their profile images and puts them into that background image. After that, via the same API, it will upload the image as a new header. 

As a true developer I decided to Google how to do this and I found this [amazing article](https://betterprogramming.pub/how-to-build-a-self-updating-twitter-banner-with-dynamic-content-7c3fedcfca25) by Thobias Schimdt. I shamelessly copied most of his code. I decided to deploy it differently (not on AWS). In this article, I will go over my changes.

In the end, my code looks like this.

```javascript
const { TwitterClient } = require('twitter-api-client')
const axios = require('axios')
const sharp = require('sharp')
const Feed = require('rss-to-json')
const Jimp = require('jimp')
const fs = require('fs')

const numberOfFollowers = 3
const widthHeightFollowerImage = 90

function getVariable(name) {

    if (fs.existsSync(`${__dirname}/creds.json`)) {
        return require(`${__dirname}/creds.json`)[name]
    }
    return process.env[name]
}

async function uploadBanner() {
    console.log(`Uploading to twitter...`)
    const base64 = await fs.readFileSync('/tmp/1500x500_final.png', { encoding: 'base64' });
    await twitterClient.accountsAndUsers
        .accountUpdateProfileBanner({ banner: base64 })
}

async function createBanner(headline) {
    const banner = await Jimp.read(`${__dirname}/assets/banner.png`)
    const mask = await Jimp.read(`${__dirname}/assets/mask.png`)
    const font = await Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
    // build banner
    console.log(`Adding followers...`)
    await Promise.all([...Array(numberOfFollowers)].map((_, i) => {
        return new Promise(async resolve => {
            const image = await Jimp.read(`/tmp/${i}.png`)
            const x = 600 + i * (widthHeightFollowerImage + 10);
            console.log(`Appending image ${i} with x=${x}`)
            banner.composite(image, x, 360);
            resolve()
        })
    }))
    console.log(`Adding headline...`)
    banner.print(font, 380, 250, headline);
    await banner.writeAsync('/tmp/1500x500_final.png');
}

async function getLatestArticleHeadline() {
    console.log(`Retrieving headline...`)
    const rss = await Feed.parse(`${getVariable('RSS_FEED')}`)
    const title = rss.items[0].title
    console.log(`Retrieved headline: ${title}`)
    // add padding left & right to align it properly
    const padding = ' '.repeat(Math.ceil((60 - title.length) / 2))
    return `${padding}${title}${padding}`;
}

async function saveAvatar(user, path) {
    console.log(`Retrieving avatar...`)
    const response = await axios({
        url: user.profile_image_url_https,
        responseType: 'arraybuffer'
    })
    await sharp(response.data)
        .resize(widthHeightFollowerImage, widthHeightFollowerImage)
        .toFile(path)
}

async function getImagesOfLatestFollowers() {
    console.log(`Retrieving followers...`)
    try {
        const data = await twitterClient
        .accountsAndUsers
        .followersList({
            screen_name: getVariable('TWITTER_HANDLE'),
            count: numberOfFollowers
        })
        await Promise.all(data.users
            .map((user, index) => saveAvatar(user, `/tmp/${index}.png`)))
      } catch (err) {
        console.log(err)
      }

}

const twitterClient = new TwitterClient({
    apiKey: getVariable('TWITTER_API_KEY'),
    apiSecret: getVariable('TWITTER_API_SECRET_KEY'),
    accessToken: getVariable('TWITTER_API_ACCESS_TOKEN'),
    accessTokenSecret: getVariable('TWITTER_API_ACCESS_SECRET'),
});

exports.handler = async () => {
    await getImagesOfLatestFollowers()
    const title = await getLatestArticleHeadline()
    await createBanner(title)
    await uploadBanner()
    return {
        statusCode: 200,
        body: JSON.stringify({ status: 'ok' }),
      };
}
```

The background image I use is created by [Canva Twitter Header Tool](https://www.canva.com/create/twitter-headers/) you can create an amazing header even without being good at designing things. 

For Twitter API to let you download your follower info, you need to have something called Elevated API level access. More about it [here](https://developer.twitter.com/en/docs/twitter-api/getting-started/about-twitter-api#Access).

I decided to deploy it as [Netlify function](https://www.netlify.com/products/functions/). So my code is saved in the netlify/function/header.js file. 

To launch this locally you can do

```bash
npm run-func netlify/functions/header.js handler
```

You can add this into your package.json file like this:

```json
{
    "scripts": {
        "generate": "run-func netlify/functions/header.js handler"
    },
    "dependencies": {
        "axios": "^0.24.0",
        "jimp": "^0.16.1",
        "rss-to-json": "^2.0.2",
        "run-func": "^1.0.5",
        "sharp": "^0.29.3",
        "twitter-api-client": "^1.4.0"
    }
}
```

I store my assets in the netlify/functions/assets folder. For Netlify to deploy those files with your function you need to tell it so. You can do it with netlify.toml file in the root of your project.

```toml
[functions]
  included_files = ["netlify/functions/**"]
```

To deploy to Netlify, just push all your code to GitHub. Login/signup to Netlify and choose your GitHub repo. Netlify will do all the magic for you. In a few seconds they will provide you with a URL you can call to trigger your function. 

Great. Now we need to run this regularly so that we can catch all the new followers and articles. To do so I decided to use [EasyCron](https://www.easycron.com/). It's a super easy-to-use platform where you can say. OK call this URL every minute. For our use case, this is will be enough and will be free. 

Now we have it all. We can enjoy our awesome free dynamic Twitter header. 

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).


Making dynamic Twitter header

To improve the performance of our app we can start reusing and caching some Promises. We will implement a simple cache with TTL.  


Lately, we started a project to improve the performance of our main app. We identified a few API calls we were calling a lot. Results of these calls can change but not very very often so it's not an issue to cache the result for a minute or so.

So I implemented a very easy cache that will reuse active promises and returns already resolved results for a minute after an initial resolution.

This article will go over the code in detail.
Let's start by simulating a parametrized API call.

```javascript
function getData(key){
    return new Promise(function(resolve, reject) {
    console.log('starting get ' + key)

    setTimeout(() => {
        console.log('ending get ' + key)
        resolve(key);
    }, 1000);
  })
}
```

Easy enough.

Now we need a few variables where we store our promises, results, and resolution times. We will also create a new function that we will be calling to get the cached results.

```javascript
const _cacheValues = new Map();
const _cacheResolvedTime = new Map();
const _cachePromises = new Map();

const getDataCached = function (key) {
}
```

The _cacheValues will hold already resolved values, _cachePromises will hold Promises in progress and _cacheResolvedTime will hold a time when the promise for the key was resolved last.

Now we will add a simple if statement that will be the basic stone of our cache.

```javascript
if (_cacheValues.has(key)) {
  return Promise.resolve(_cacheValues.get(key));
} else if (_cachePromises.has(key)) {
        return _cachePromises.get(key);
} else {
  const promise = new Promise(function (resolve, reject) {
    return getData(key).then(data => {
      _cacheValues.set(key, data);
      _cachePromises.delete(key);
      const now = new Date().getTime();
      _cacheResolvedTime.set(key, now);
      resolve(data);
    });
  });
  _cachePromises.set(key, promise);
  return promise;
}
```
If we already have a value for a key let's return that.
If we have a Promise in progress return that.
If we have no data for that key, we will trigger the original method. This trigger will be wrapping its promise so that we fill our cache on resolve.

Now we will add the time to the live feature.  At the start of our new method, we will add.

```javascript
const now = new Date().getTime();

if (_cacheResolvedTime.has(key)) {
  if ((now - _cacheResolvedTime.get(key)) > 60000) {
  _cacheResolvedTime.delete(param);
  _cacheValues.delete(key);
  _cachePromises.delete(key);
  }
}
```
If we have it resolved and the resolution time is more than 60 seconds, we will remove it from our caches and continues to witch the rest of our logic.

Now we are done, we can test our code.

```javascript
getDataCached('a').then(result => { console.log('first call outer: ' + result);
    getDataCached('a').then(result => { console.log('first call inner: ' + result); });
});

getDataCached('b').then(result => { console.log('first call outer: ' + result);
    getDataCached('b').then(result => { console.log('first call inner: ' + result); });
});

getDataCached('a').then(result => { console.log('second call outer: ' + result);
    getDataCached('a').then(result => { console.log('second call inner: ' + result); });
});

setTimeout(() => {
	getDataCached('a').then(result => { console.log('later call outer: ' + result);
    getDataCached('a').then(result => { console.log('later call inner: ' + result); });
});
}, 70000);
```
You can see the console result and this whole code in this [Fiddle](https://jsfiddle.net/61pfqg43/1/).

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).


Reusing Promises in JavaScript

How to add accurate reading time stat into your Next.js blog.


I recently started my journey to improve my frontend/javascript skills. So the obvious way is by adding a bunch of new features into my blog.

The latest thing I added is this little info on how long the article will take you to read. This is on pretty much every blogging platform and I always wanted it.

The theory behind this number is that people on average read around 225 words per minute. So we need to count the words in the article and divide it by 225.

So the basic code for this would be something like this:

```javascript
const wordsPerMinute = 225

export function readingTime(text) {
    return Math.ceil(wordCounter(text) / wordsPerMinute)
}
```

Now we need to count the words. I started by naively splitting by white space and counting. I was not happy with this result as I have a lot of code in my articles and it counted a lot of syntax as words.

So I decided to split by whitespace and check if each token is a word. This is done by checking if it contains some alphanumeric token.

My implementation:

```javascript
function wordCounter(input) {
    const text = input.split(/\s+/)
    let wordCount = 0
    for (let i = 0; i < text.length; i++) {
        if (text[i] !== ' ' && isWord(text[i])) {
            wordCount++
        }
    }
    return wordCount
}

function isWord(str) {
    let alphaNumericFound = false
    for (let i = 0; i < str.length; i++) {
        const code = str.charCodeAt(i)
        if ((code > 47 && code < 58) || // numeric (0-9)
            (code > 64 && code < 91) || // upper alpha (A-Z)
            (code > 96 && code < 123)) { // lower alpha (a-z)
            alphaNumericFound = true
            return alphaNumericFound
        }
    }
    return alphaNumericFound
}
```

I am very happy with my results. I crosspost most of my articles on Medium and my result times are pretty much the same as their results. In some cases, I have a minute difference but I can live with that.

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).



Adding reading time stat in your Next.js blog

How to add pagination into your next.js blog?


I recently redid my blog with Next.js. I used the amazing Next.js tutorial and I was very happy with it. But as time went on and I wrote more and more articles it became apparent that I need to add paging. I am not an expert on Next and it turns out that adding paging will not be that easy. I used static generation for my listing page and generating all the pages is not an option. I decided to switch to server-side rendering for SEO reasons but also I wanted to switch pages on the fly.

## Adding API

First thing I needed to add an API call that would provide paging info and list posts.
I created a posts directory in a root api folder and in there I created a [page].js file. This file will be my api handler.
```javascript
// api/posts/[page].js

import {getSortedPostsData} from "../../lib/posts";


export default function (req, res) {
    const { page } = req.query
    const allPostsData = getSortedPostsData()
    const perPage = 9
    const totalPosts = allPostsData.length
    const totalPages = totalPosts / perPage
    const start = (page - 1) * perPage
    let end = start + perPage
    if (end > totalPosts) {
        end = totalPosts
    }

    res.status(200).json({
        currentPage: page,
        perPage: perPage,
        totalCount: totalPosts,
        pageCount: totalPages,
        start: start,
        end: end,
        posts: allPostsData.slice(start, end)
    })
}
```

This is pretty straightforward code. It's doing some stats from an array of all posts.
Side note here, if you are deploying to Vercel, your api calls are deployed as serverless functions and you need to tell Vercel to add your markdown files to the serverless deploy. This is done via root vercel.json file.

```json
{
  "functions": {
    "api/posts/[page].js": {
      "includeFiles": "posts/**"
    }
  }
}
```

The root posts directory is the place where I have all the markdown files.

## Modifying blog listing page

I used the blog listing page pretty much out of the next.js tutorial. I was using static page generation. So the first thing I have done was to change it to server-side rendering.

```javascript
Blog.getInitialProps = async ({ query }) => {
    const page = query.page || 1; //if page empty we request the first page
    const response = await fetch(`${server}/api/posts/${page}`)
    const posts = await response.json()
    return {
        totalCount: posts.totalCount,
        pageCount: posts.pageCount,
        currentPage: posts.currentPage,
        perPage: posts.perPage,
        posts: posts.posts,
    }
}
```

It fetches our new api call and returns it as our component properties.
The server variable is different for localhost and for prod. We need to specify the full path as this will be called from the server.

```javascript
const dev = process.env.NODE_ENV !== 'production';
export const server = dev ? 'http://localhost:3000' : 'https://ppolivka.com';
```

I am using next/router to navigate between pages. And to make all the things more user-friendly I added a loading animation on route changes.

```javascript
const [isLoading, setLoading] = useState(false);
const startLoading = () => setLoading(true);
const stopLoading = () => setLoading(false);

useEffect(() => {
    Router.events.on('routeChangeStart', startLoading);
    Router.events.on('routeChangeComplete', stopLoading);

    return () => {
        Router.events.off('routeChangeStart', startLoading);
        Router.events.off('routeChangeComplete', stopLoading);
    }
}, [])
```

To render the posts or the loading I have a if in this style.

```javascript
let content;
if (isLoading) {
    content = (
        <div className={styles.loadWrapper}>
            <Spinner animation="border" role="status">
                <span className="visually-hidden">Loading...</span>
            </Spinner>
        </div>
    )
} else {
    //Generating posts list
    content = (
        <>
            {props.posts.map(({ id, date, title, image, description }) => (
                <Card className={styles.item}>
                    <Card.Img variant="top" src={image} width={360} height={215} />
                    <Card.Body>
                        <Card.Title>
                            <Link href={`/posts/${id}`}>
                                <a>
                                    {title}
                                </a>
                            </Link>
                        </Card.Title>
                        <Card.Subtitle className="mb-2 text-muted"><Date dateString={date} /></Card.Subtitle>
                        <Card.Text>
                            {description}
                        </Card.Text>
                    </Card.Body>
                </Card>
            ))}
        </>
    );
}
```

For the actual pagination navigation I used awesome component react-paginate.

```javascript
<ReactPaginate
    previousLabel={'<'}
    nextLabel={'>'}
    breakLabel={'...'}
    breakClassName={'break-me'}
    activeClassName={'active'}
    containerClassName={'pagination'}
    subContainerClassName={'pages pagination'}
    initialPage={props.currentPage - 1}
    pageCount={props.pageCount}
    marginPagesDisplayed={2}
    pageRangeDisplayed={5}
    onPageChange={paginationHandler}
/>
```

It's referring the pagination handler function, that has the actual navigation logic. 

```javascript
const paginationHandler = (page) => {
    const currentPath = props.router.pathname;
    const currentQuery = props.router.query;
    currentQuery.page = page.selected + 1;

    props.router.push({
        pathname: currentPath,
        query: currentQuery,
    })

}
```

You can see the whole blog page in this [Gist](https://gist.github.com/PavlikPolivka/a3125f354757a498f769ed28a2840991).


---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).



Adding pagination into Next.js blog

Few tips to help you with your Java job interview.


In my previous job, I did a lot of interviews for our Java developer positions. We had a typical modern Java stack based on Spring framework and relational database. We usually hired junior devs right after school so our interview process was designed to find talented people with potential, not encyclopedical knowledge.

We had one in-person round and take a home coding assignment. This article will try to cover both.

## In-person round

This was the more important round of our process. Basically usually a team lead of the team that was hiring and one senior dev was conducting it. The goal was to determine if the person would be a good fit for a team, had some technical thinking capabilities and the most important could communicate.

In the first part, we had a small talk portion, that was around previous experiences, either their current job or a school project.

Typical questions here would be:
- What was the last project you worked on?
- What have you learned recently?
- What would be your dream project?

In the second part we did few technical questions. Around some basic Java or Spring things.

Typical questions here:
- Explain static keyword.
- Explain how to compare objects in Java. Equals and hasCode.
- Inversion of control and dependency injection.

In the third part, we had a technical challenge to solve. It was a simplified real problem we had to solve during last year (we were changing this to keep it interesting). It did not have one solution. Involved designing a simple alghoritm that strongly suggested use of recursion, but could be solved numerous ways.

The ultimate goal was to for the candidate to design a data structructure and use it in the simple alghoritm. We wanted  candidate to communicate what they are doing and we usually helped them talk through everything. We never looked at the syntax or cared what language they used. We wnated to see the capabilities to design the structure to store the data and some basic thinking to see of they at least were able to talk through what should be done.

In the last part we gave space for any questions.

## Take a home coding challenge

We had a very easy take a home coding challenge that was basically to implement CSV parser. Parse data in the CSV we provided and print it as HTML table and excel file.

We looked at theese concepts in the final code:
- Polymorphism
- Logging
- Library usage
- Comments
- Unit testing

We did not require a perfect solution, we even did recomend to implement as much as they are feel like and then just write comments explainging how to finish it. We did not had a time constrain and ultimate goal here was to see if the candidate would be able to write code at our standards.

---

Hope this article helped you can always ask me about anytihng on my [Twitter](https://twitter.com/pavel_polivka).. 


What to expect from Java interview in 2021

How to debug Maven tests in IntelliJ IDEA.


We all know it. You write the test, it works when you click the Run button in IntelliJ but it fails when run with.

 ```bash
 mvn clean test
```

It can be all sorts of issues, related to jar packaging, etc... You add the breakpoint into your test, but how to convince Maven's Surefire plugin to debug mode? 
How to use awesome power set of IntelliJ debugging tools? 

**Remote debug to the rescue.** 

## IntelliJ IDEA

Setting up remote debug for your Tomcats, etc can be very cumbersome, but doing it for Maven Surefire plugin tests is actually very easy. 

In IntelliJ we create new run Configuration. 

![IntelliJ IDEA Run Configuration](/images/maven-debug.png)

We can just add new one and leave the defaults in. 

## Maven

Now we execute the maven run in debug mode. 

```bash
mvn test -Dmaven.surefire.debug
```

This will start the tests in debug mode. Read the terminal text and when there is line that the debug mode started, start the IntelliJ run config. 
It will attach itself to the executing test, and you can use all the tools IntelliJ provides. 

If you want to execute just one concrete test, you can do it like so:

```bash
mvn test -Dtest=TestClass.java#testMethod -Dmaven.surefire.debug
```

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).

Debugging Maven tests in IntelliJ IDEA

How to get simple text based thread dump from huge heap dump file.


Recently I was debugging some nasty deadlocks and as one does in this kind of situation I needed to look into thread dumps. Unfortunately for me, the only thing I had was heap dump. Do not get me wrong heap dumps contain much more information, including the needed thread info. But heap dumps are also very big (can be gigabytes) so they are not very practical if you want to share them with a co-worker or upload them to online analyzer tools like [FastThread](https://fastthread.io/). All I wanted was a simple text file with the thread dump. 

I started to google and to my surprise I was not able to find easy to use tool that can do this. Most heap dump analysis tools can show you the thread data, but cannot export it in the format that is associated with thread dumps. I accepted my faith and continue. Until I noticed this nice button in VisualVM that did exactly what I wanted.

## Step by step

### Open VisualVM

[VisualVM](https://visualvm.github.io/) is a JVM troubleshooting tool, it was bundled with JDK 6,7,8 and is a standalone free tool. It can help you with JMX, profiling, memory monitoring, taking and displaying thread and heap dumps and so much more. If you do not have it on your local machine, download it and learn how to use it. I will definitely improve your troubleshooting capabilities. 

### Open your heap dump in VisualVM

It's straightforward. Open the heap dump (hprof file) via the Load Snapshot button.

### Switch to the thread view

After the heap dump is loaded in the top left corner of the tab is a dropdown. Switch it to Threads.

### Switch the thread view to HTML moved

This is named confusingly, but it will do exactly what you need. 

Next to the dropdown is a couple of buttons to switch how the thread view is displayed. The first one is the fancy UI and the second one (confusingly named HTML) will convert the thread info into a thread dump text format. This operation will take some time as VisualVM is converting the thread info into the format. 

### Copy and paste

Now you can copy the text and enjoy your thread dump.

### One image instead of 1000 words

![VisualVM with thread info](/images/thread-dump.png)

---

For more tips like this, you can follow me on [Twitter](https://twitter.com/pavel_polivka).

How to get Thread dump from Heap dump

How to easily parse cookies in Java with HttpCookie class.

The other day I was solving a very complex bug involving some sticky session cookies and multiple reverse proxies. During the bug solving process I discovered that I need to parse set-cookie header strings and do some value filtering in one of our reverse proxies. 

My first idea was to write some kind of regex that would parse the string and get me my desired values. I went with something like this:

```
(.*?)=(.*?)($|;|,(?! ))
```

Here is a [regexer link](https://regexr.com/62bdp).

Turns out this is more complex than simple regex. One string can contain multiple cookies, optional parameters, etc... Then there is an issue with multiple formats of how the cookie string can look like. I would need to write a lot of logic around my regex.

Naturally, I am a bit lazy so I started looking into what Java can offer. There must be an existing solution for this. I found a class named `HttpCookie`. 

Usage is very simple:

```java
List<HttpCookie> cookies = HttpCookie.parse(cookie);
```

It will parse all the cookies in the string into a collection of objects that have all the needed info.

```java
 private final String name; // NAME= ... "$Name" style is reserved
 private String value; // value of NAME

 // Attributes encoded in the header's cookie fields.
 private String comment; // Comment=VALUE ... describes cookie's use
 private String commentURL; // CommentURL="http URL" ... describes cookie's use
 private boolean toDiscard; // Discard ... discard cookie unconditionally
 private String domain; // Domain=VALUE ... domain that sees cookie
 private long maxAge = MAX_AGE_UNSPECIFIED; // Max-Age=VALUE ... cookies auto-expire
 private String path; // Path=VALUE ... URLs that see the cookie
 private String portlist; // Port[="portlist"] ... the port cookie may be returned to
 private boolean secure; // Secure ... e.g. use SSL
 private boolean httpOnly; // HttpOnly ... i.e. not accessible to scripts
 private int version = 1; // Version=1 ... RFC 2965 style
```

This saved me a lot of time.



Parsing cookie strings in Java with HttpCookie

Description of daily routine and priorities of senior developer with family.

In this article, I want to go over my daily routine and describe my work process. It's important to have some kind of routine each day. I do not stick to it 100% as developers we are supposed to be agile and as such we sometimes need to change our plans. 

My daily routine is changing with time and my priorities. So do not take this as the best plan you can do. Take it as an inspiration. 

## Priorities

When my daughter was born my priorities changed a lot. I realized that I do not want to spend all her childhood at work. I used to go to the office every day, the commute took me 2 hours per day. Spend 8 hours there working. One-hour lunch. I did not see her for more than a few minutes per day. Add some open source work and side-project work in the evenings and I did not see my girlfriend that much more. So my biggest priority became to **be more with my family**. 

Work is still very important to me though. I really enjoy what I do and you know it brings money to our family. To be successful in my work I cannot effort to just sit through 8 hours of work every day, I need to learn new stuff, improve my skills, etc... So another priority is **my work**. 

The last priority on this list is **myself**. When I started with this priority shift I kinda did not realize that myself should be my priority as well. I was not feeling very happy. I was tired all the time. And to be honest I missed some of my me time.

As I realized my priority shift I realize I need to do something with my life and routine. The first thing I did was I changed jobs. I realized that if I want to spend more time with my family I need to work from home. My current job offered one day per week, which was not enough and I kinda wanted to change that job anyway. Now I work mostly out of the home. 

The second thing we did, we moved out of the city to a village bit outside Prague. Not we have nice 4 bedroom house and I have my own office in there. I still get to leave and go to the office so that I have a routine. 

## Morning

Every morning we (as a family) woke up at around 7 AM. This is mostly driven by the hour daughter that simply wakes up at that hour. I do not have an alarm set up. Days, when she wakes up a little bit later, are a nice surprise.

First thing in the morning we do our personal hygiene and have a nice family breakfast together. Then I spend some playtime with my daughter and around 8:30 I go to the office to start the workday. 

Side note here when I spend time with my family I try for it to be at least one hour of uninterrupted time. Less seems like cheating. 

## Work Day

First thing in the morning I will compile a TODO list. I start by copying the tasks that were not finished yesterday I will add new ones from email, calendar, etc... I prioritize those by the ABCDE method and start the work on the A task. During the day I am adding tasks to my list. If those are not finished I will prioritize them the next day. If anything urgent comes up I deal with it. 

I try to do my work with the Pomodoro technique. I use [Marinara Chrome Extension](https://chrome.google.com/webstore/detail/marinara-pomodoro%C2%AE-assist/lojgmehidjdhhbmpjfamhpkpodfcodef). I do 20 minutes focus intervals and 5 minute breaks between those. I usually try to do at least 8 focus intervals per day. During these, I do my best working.

During breaks, I recently started to do Twitter. I want to build some online following so during a break I will take time to interact with people.

The rest of my 8 hours is spent doing meetings, emails, ad-hock work, or low-priority tasks. 

Recently for some meetings, I started to go for walks during those. I just take headphones, phone and go to the on the walk meeting.

Once a week I am trying to write a blog article. 

## Lunch

Lunch is another important part of my day for me. It's another meal we are having together as a family. After lunch, my daughter goes to sleep and I either spent that time going back to work (so that I can stop early that day) or spent it doing errands. Like grocery shopping, etc... 

## Evening

Every day I try to end my work as soon as possible. I can always work for few hours in the evening, I cannot spend that time with my daughter tho as she is already asleep. I try to spend at least two to three hours here every evening.

After she is sleeping there are some options I try to balance into my week. I either exercise, spend time gardening, doing side projects, or doing some other hobby (I love Warhammer 40k miniature painting). Then I spent some time with my girlfriend either watching TV, playing board games, etc... Some evenings we spend apart reading or doing our own things.

## Weekends

On the weekends I try not to work at all. My goal is not even to start the computer. We are trying to go on trips, spend days at the pool, etc... 

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).



Day in shoes of father developer

Best tools you can you to improve your blog writing.


As I changed jobs and started working from home the thing I missed the most was teaching. I was always there for people to go over their problems, help them, explain. As I was trying to figure out how to take this back to my life I figured I give blogging a chance. I am not a very successful blogger, all my articles get few thousand views at max but it brings me joy and I love doing it. 

In this article, I want to go over few tools that are essential for me. 

## [Grammarly](https://www.grammarly.com)

Grammarly is literary a lifesaver. I am not a native speaker/writer and I need as much grammar help as I can get. It has a very intuitive and very good interface. The quality of the corrections is way ahead of tools like Word or Google docs. It will make you write like a native speaker. 


## [Hemingway](https://hemingwayapp.com)

Hemingway is another awesome tool that makes your writing better. It's inspired by the writing style of Ernest Hemingway. It will take your text and mark the sentences that seem too complex, words that can be removed, etc... 

I usually take my text through Grammarly and then through Hemingway. The result is very readable text. 

## [Unspalsh](https://unsplash.com)

Unsplash is a website that has an endless amount of photos you can download and use for free. For commercial and non-comertional use. You can find almost everything there. I use those for my images in blog posts. 

As a side note here I also have some of my images provided there. I love photography and this seems like an awesome way of repaying the community. 

## [Trello](https://trello.com/)

Trello is a task management tool. Great for managing Kanban workflows. I use it for planning my blog posts. 

In the first column, I have all my ideas for posts. Whenever I have an idea I put it there. In the second one, I have my posts that are in "research". I can have notes there, links, etc...

The third column is for my in-progress work. And the last one for done. 

---

If you like this article you can follow me on [Twitter](https://twitter.com/pavel_polivka).



Best tools for writing a blog

Some side project ideas to keep you learning new things.


Recently I wrote an [article](https://ppolivka.com/posts/how-to-keep-learning-as-a-developer) about how to keep learning as a developer that highlighted side projects as one of the biggest helpers to keep learning new stuff. In this article, I want to present few side project ideas that you can try to do. 

Most of these projects I tried to implement in the past or planning to do in the future. I mostly work as a backend Java developer so my side projects are trying to be anything that that. For each project, I will try to provide as many details as possible to get you started. 

## Temperature monitor

I am obsessed with data and its visualization. This is one of those I did already and loved every second of it. This side project has few parts in it. 

First thing is to have an actual sensor that would measure temperature and store the data somewhere. I used Arduino for this. With WiFi addon and temperature sensor. Arduino is super cheap and you can buy a lot of it on Aliexpress/Amazon/wherever you do your electronics shopping. You can use Raspberry Pi or any other board. The goal is to learn how to program it. The bonus objective here can be to design and 3D print a nice case for your sensor. 

The second part is the backend. You can go and create your REST API for this (if this is something you need to improve). As I already mentioned I wanted to sidestep the backend so I decided to use a third-party service called [ThingSpeak](https://thingspeak.com/). It's a super easy-to-use, free for non-commercial use platform that gives you an HTTP endpoint to where you can send your data. Its primary use is in the applications like this so they even have nice libraries to be used on platforms such as Arduino.

Third and the last component to this is a frontend. You need to fetch your data and display it. You can display current temperature, average temperature, a graph of the evolving temperature. There are endless options. When I did this it was the first time I used React/Flux and I got most of the concepts of React from this. And this was in 2015. 

## Alliexpress Twitter bot

This is a fun small project. I created a bot that goes to Aliexpress, finds a completely random item under one dollar and tweets link to it. Why? So that I learned about Twitter API, web scrapping and that I can see the random stuff you can buy there. 

For the web scrapping part, you can go the traditional route of downloading the HTML, parsing it, and find one random thing. Or you can try to do it with something like Selenium. It's up to you and what skills you want to improve. 

## D&D Map Generator

I played a ton of D&D growing up and as I started to DM I figure out I am quite a lazy DM and wanted to automate a lot of my prep work. There are two types of the map you might need. 

One is a geographical map of your world, where are the rivers, mountains, forests, etc... There is a ton of approaches you can take here and you will learn a lot about data structures, math, etc... To get you started I recommend this awesome [article](http://www-cs-students.stanford.edu/~amitp/game-programming/polygon-map-generation/) it goes over a lot and has tons of links to other approaches. 

The second map you are going to need is a dungeon map. Those are usually some rooms connected with hallways. It's all full of traps, monsters, and sweet loot. Again there are tons of options you can take. This very nice [article](https://www.freecodecamp.org/news/how-to-make-your-own-procedural-dungeon-map-generator-using-the-random-walk-algorithm-e0085c8aa9a/) will get you started on the concepts. One of the best ones I ever found is this [one](https://apps.mysticwaffle.com/dnd-dungeon-generator/) from MysticWaffle. It gives you a very nice looking map, with room descriptions, furniture, traps, items, etc... 

## Choose your own adventure game

As a kid, I loved these. You can do these in any technology. You can do them in a browser, as a console app, mobile app, whatever. You can have fancy UI or just text-based. You can provide a set of accepted commands or do some fancy AI-powered text meaning recognition. It's up to you. This is an open playground.

As a bonus, you will get to practice your writing. 

---

If you have different ideas or you want to discuss these, you can contact me on my [Twitter](https://twitter.com/pavel_polivka).

Side Projects Ideas To Keep Learning

Few tips and tricks on how to keep learning.


"Keep learning." It's one of those things you will read on every guide on how to become a good developer. But how can one keep learning every day? It's easy in the beginning you are starting, there is so much to learn. But now, you have a good-paying job, you know everything well enough to keep you and your employers happy. Sure from time to time, there will be some challenges that will enable you to learn new stuff. But it's not enough. I think that I need to learn at least one new thing each day, otherwise I do not count that day as a good productive day. 

OK, but what can we do? In this article, I will go over a list of possible solutions to this problem.

## Side projects

Side projects are the obvious solution to this problem. You do not need to aim for the best-looking, startup-ready project out there. The goal (at least for me) is to learn something new. So If your day job is mostly writing backend Java your side project should not be a backend Java. I recently redid my blog with Next.JS as a way to force myself to keep current with modern front-end technologies. In the past, I did a lot of side projects that were more of a joke. 

To learn machine learning I tried to do something call Putin Emoji. I was image search, that searched through photos of Vladimir Putin that matched the desired emoji. He surprisingly has almost a full range of expressions. 

You can even deploy it somewhere for people to see, the DevOps part can be a learning experience as well. I was running Putin emoji live for a month or so, but as you imagine it's hard to monetize such a thing (based on a stolen image of one of the world leaders) and it was not very cheap to run so I decided to take it down. Plus you know it was not perfect anyway but I learned a ton. 


## Reading

Another obvious solution is to read. You can read books, blogs, Twitter, etc... You can learn a ton through reading but I would count that as a piece of theoretical knowledge, I need to touch stuff to learn. Maybe you can code alongside the reading, etc... 

Do not confuse reading through your Twitter wall with learning. Sure there may be tons of tweets describing a concept, etc.. but how hard a concept can be if it could be explained in the form of a Tweet? 

Great sources you can use are:
- [Dev.to](https://dev,to/)
- [Medium](https://medium.com/)
- [Hashnode](https://hashnode.code)

## Writing

Writing is a great tool that can help you learn new stuff. I try to document everything that I learn. This way I have notes to almost everything. For this, I use a folder full of markdown files that I edit in VS Code (the most overkill note-taking app). Sometimes some of my notes will make it as a blog post. Or Stackoverflow answer. 

## Videos

You can also watch video courses (or YT videos) where someone is explanting the stuff to you. To be honest I do not like watching videos, as I much prefer written tutorials. You need to keep up with the video, rarely do people code alongside, as the video keeps rolling, and I hate pausing it. You cannot copy-paste from a video either. 

But hey some people use videos as their main learning source and do not complain. That is why it's on this list.

## Speaking

I always found that the topics I know the best are the topics I used to teach to others. In my previous job, I was doing a lot of company-wide workshops about clean code and testing. I used a lot of time preparing those presentations and keeping those up to date (yes mainly changing meme images in the slides to the current memes) this kept in the loop, I was perceived as an expert on the topic and I kept learning new stuff. You can do the same as a speaker in your local meetups and or any conference. 

---

For more tips like this, you can follow me on [Twitter](https://twitter.com/pavel_polivka).


How to keep learning as a developer

I decided to rebuild my blog with Next.Js.


Recently I was trying to figure out what my page should look like. Should it have a blog? Should I use some of the popular blogging platforms? I tried everything. I liked [Hashnode](https://hashnode.com/) as it offers great tools, support for custom domains, and other cool features. But in the end, I was not happy with the result. I need more customizations, I need more freedom. 

I tried building it on my own with Spring Boot and Hotwire. I like this stack and agree with the philosophy of Hotwire. Unfortunately, to do this in the scope I would like it would take a lot of time and as a father, I do not have that much time on my hands. 

I know that Next.JS is pretty popular and for some work reasons I was looking into it. I came across their how to start [tutorial](https://nextjs.org/learn/basics/create-nextjs-app) and in the scope of this tutorial (took me about 4 hours), you will build a skeleton blog. **I was surprised how easy and fast it was.** Then I decided I will take this code and finish the job. In the scope of few evenings, I had the new version of my [site](https://ppolivka.com) built and deployed to production. 

## Tutorial

I never saw a tutorial that is this polished. It was a joy to use and I was feeling like I am moving ahead with the speed of light. The tutorial will go over the most important parts of creating a basic blog. You do not need to be that familiar with React to get the concepts. You just need basic knowledge of JavaScript. I would recommend everybody go through that tutorial even if only to see how to make proper tutorials. 

## Styling

I am not good with CSS. I consider it one of my weaknesses. It always seems like there is tons of way to do the one thing you need, it's never clear and it's magic to me. I was hearing tons of good vibes about TailwindCSS so I decided to try that. You know since I am on this hype wave of trying new stuff. There I was not that lucky. It seems horrible. It just takes all the horrible parts of CSS and moves to a different level. There is no good tutorial. It seems like a complete mess. Maybe I was using it wrong but it seemed I would need to write tons of custom CSS anyway. 

I decided to go the easiest way and just do the whole thing in pure CSS. No frameworks, no nothing. In the end, I am quite happy with the result, but it's a perfect CSS code. I would say it's CSS spaghetti. 

## Other functionality

For now, I decided to add few features that are not covered by the tutorial. 

One is the Contact Me form. I found a great [tutorial](https://medium.com/nerd-for-tech/coding-a-contact-form-with-next-js-and-nodemailer-d3a8dc6cd645). With it was easy to do. 

One small note here. I spent way too much time trying to figure out why the API response was not submitted. Instead of:
```javascript
res.status(200)
```
you need to do:
```
res.status(200).end()
```

Second one is code highlting in the blog posts. For that I decided to Prism.js library. Here is a code snippet that enables it for you. 
```javascript
const prism = require("prismjs")
require('prismjs/components/prism-java');
require('prismjs/components/prism-typescript'); // add more if you need

useEffect(() => {
 if (typeof window !== 'undefined') {
 prism.highlightAll();
 }
}, []);
```


## Vercel hosting

The biggest positive surprise for me was the Vercel hosting. It's part of the tutorial as well and it's super easy and super intuitive. You just give them your git repo, they will do the rest of you. Your API endpoints are deployed as serverless functions, everything that should be served from CDN is automatically served from CDN. Adding a custom domain was just a few clicks away. 

It works like magic. 

## Summary

I am sold on Next.JS. If I would be starting my startup I would go for it. It's super easy and yet very powerful. I would host on Vercel. 

For CSS I would probably go for Bootstrap and it still seems the easiest one to use for me. 

Building personal blog with Next.js

How to correctly compare doubles in Java?


Recently I was solving an interesting bug that came down to comparing two `Double` variables with `equals` method. It looks innocent, what can be wrong with something like `firstDouble.equals(secondDouble)`? 
The problem here is with how doubles are stored. To fit them into 64bytes (usually) they are rounded. 

See the example below:
```java
Double firstDouble = 0d;
for (int i = 1; i <= 42; i++) {
 firstDouble += 0.1;
}

Double secondDouble = 0.1 * 42;

System.out.println(firstDouble); // 4.200000000000001
System.out.println(secondDouble); // 4.2
System.out.println(firstDouble.equals(secondDouble)); // false
```

This inaccuracy is caused by rounding errors.
We need to use a different approach to compare those doubles. 

## Threshold method

If we do not have access to any libraries and want to solve this with Java only we can use something called the threshold method. 
Simply, we will subtract those doubles, make absolute value, and compare if the result is smaller than some very small number. 

```java
double epsilon = 0.000001d;
boolean result = Math.abs(firstDouble - secondDouble) < epsilon;
System.out.println(result); // true
```

That small number is called epsilon and the smaller it is the better the accuracy of the result. For most cases, 5 decimals should be enough. 

## Apache Commons Math

There is no utility method for this in JDK. Luckily for us, Apache Commons Math library has us covered. With it we can compare those doubles like so:

```java
double epsilon = 0.000001d;
boolean result = Precision.equals(firstDouble, secondDouble, epsilon)
System.out.println(result);
```

The epsilon has the same meaning as in the example above. 

There are similar methods in Guava and other libraries. 

---

You can follow me on [Twitter](https://twitter.com/pavel_polivka) to get more tips like this. 

Double comparioasn in Java

Few tips and tricks helping you be good at code reviews.


In my time as a developer, I have given hundreds of code reviews. It's something I learned to enjoy very much as it gives me others' perspectives on our codebase. Most days I learn something new from it. In this article, I want to go over few tips on how to be good at them and especially how to enjoy them. 

## Good pipeline

 Most teams have some kind of code-style rules and recommendations on how to uniform their codebase. Whatever you do, do not force code reviewers to check whenever the pull request complies with those rules. There are tools to do that look at eslint, SonarQube. These tools should be run as part of your PR pipeline.

 SonarQube is one of those tools that will improve code reviews for everyone in your team. It can find style issues but can do so much more. With their code analysis, they can find the most common mistakes you can do in your code. You never closed your resource? Sonar will let you know. Personally, I never do code review before Sonar finished its job. 

 You need to have a concrete process that will run every time somebody creates a PR or pushes new changes in there. Steps can look something like this.

 - Compile the code
 - Run the tests
 - Run linting
 - Run SonarQube
 - Do the manual review process
 - Merge to the main codebase

## Flyover

 Like first thing, in my review, I will do a quick overview of all the changed files. This I usually do inside the pull request UI. I am focusing on few things during this stage.

 First is the code readability. How is the reading experience? Is it apparent what is being done? Good code should be able to convey its purpose at first glance. Then I am trying to figure out if this change is what is required by the corresponding change request. I will read through the ticket and try to match all requirements there in the pull request. 

 During this stage, I do not dive deep into the implementation details. I identify those for later stages. 

 Possible points conveyed at this stage:
 - change is not very readable
 - change does not cover the requirements, or change request ticket was not changed as requirements changed
 - missing tests

## Go deep

 After the brief code flyover, I have a list of changed files I need to go deep into. I usually do this in IDE so that I can see connections between files better, but for most changes, it's ok to do it in the web UI of the pull request. 

 I start by asking the question of how would I solve the problem and go from there. Is there a piece of code in our codebase that does something similar (or the same)? Is there a library (that we currently use) that can be used for this? If there is a library that we do not use currently is it worth adding to solve this issue? 

## Test review

 Do not forget to review the tests. Are all cases valid? Does those tests have the possibility to find something? Are assertions readable? Are tests even present? 

 Do not be afraid to fight back to add more tests if you as a reviewer feel like there is a possibility to add them to improve the codebase. 

## Be nice and educate

 Whatever you do, do not be arrogant, snarky, and sound like a know-it-all. If the proposed solution is valid, but you would do it differently you may say so but also approve the request. You may leave education comments, but too much can of those can be harmful. Consider what feels important. Do not argue about little things, people are different and have different opinions. 

## Approval

 Be quick on approval, not perfect is ok. 

 This is the golden rule you should go by.

---

 For more tips like this, you can follow me on [Twitter](https://twitter.com/pavel_polivka).

How to be good at Code Reviews


My name is Pavel Polivka and I love solving problems. I work as a full stack developer and I do this for a lot of years now. Part of my job always was to teach new and junior people how to work on our codebase, etc.. This part of my job was made very difficult thanks to the coronavirus pandemic and me working from home. Thanks to that I decided I will start blogging online to teach as many people as possible.

You could see some of my articles on Medium or dev.to I am active there lately, but I decided that I want a place for myself, hence the creation of this blog.

Here is a list of topics you can expect from me:

- problem solving
- productivity
- java
- javascript
- homeownership
- Warhammer 40k
- book reviews

Hope you will enjoy my writing.

Hey! I'm Pavel Polivka.

Professional Problem Solver

What I Do

Write Code

Write Blog

Write Fiction