Project structure

The project is so simple to the point that I don't even create a folder for components. The page directory is for the home page and quiz page. The app.tsx file contains logic for this project. The data directory contains questions for the quiz.

I use CSS file for styling as there is no benefit using complicated system such as CSS Module or CSS-in-JS. Tailwind is a good alternative choice.

Source of app.tsx

import { Logo } from './logo'
import Router, { route, Route } from 'preact-router'
import { h } from 'preact'
import { useState } from 'preact/hooks'
import { Index } from './pages/index'
import { Quiz, QuizProps } from './pages/quiz'
import { questions } from './data/questions'

function getQuestion() {
  return questions[Math.floor(Math.random() * questions.length)]
}

export function App() {
  const [questionNumber, setQuestionNumber] = useState(1)
  const [started, setStarted] = useState(false)
  const [currentQuestion, setCurrentQuestion] = useState<string>(getQuestion())

  const handleNext = () => {
    setStarted(_ => true)
    setQuestionNumber(n => n + 1)
    setCurrentQuestion(oldQuestion => {
      let newQuestion: string
      do {
        newQuestion = getQuestion()
      } while (newQuestion == oldQuestion)
      return newQuestion
    })
    route(`/questions/${questionNumber}`)
  }
  return (
    <>
      <Router>
        <Route component={() => <Index onNext={handleNext} />} path="/" />
        <Route component={({ questionNumber }: Partial<QuizProps>) => <Quiz onNext={handleNext} questionNumber={questionNumber} currentQuestion={currentQuestion} started={started} />} path="/questions/:questionNumber" />
      </Router>
    </>
  )
}

Note that I use preact-router. It render components inside base on the path prop. It's not quite friendly for TypeScript because I would need to define the component to accept path props or have global definitions similar to how css props work. I don't know how to do it yet. Preact router provides Route component so I can use the router in TypeScript friendly way.

There is nothing interesting in Index page component. Let's take a look at Quiz page.

Source code of quiz.tsx

import { route } from "preact-router"
import { useEffect } from "preact/hooks"

export interface QuizProps {
    onNext: () => void,
    questionNumber: number | undefined,
    currentQuestion: string,
    started: boolean,
}

export function Quiz({ onNext, questionNumber, currentQuestion, started }: QuizProps) {
    useEffect(() => {
        if (!started) {
            // Go home. You haven't visit home yet.
            route("/", true)
        }
    }, [])
    return (
        <>
            <h1>Question {questionNumber}</h1>
            <p>{currentQuestion}</p>
            <button onClick={onNext}>Yes</button>
            <button onClick={onNext}>No</button>
        </>
    )
}

And that's the prank, no matter what you clicked, you only get another random question. Nothing is saved. Nothing is used to determine your favorite language.

This projected fooled my friends to think that the quiz will eventually end. I want this prank to be obvious so I put joke questions such as "What is your favorite TV show?" there.

Conclusion

This is a simple project created in a simple way. There is no need for CSS-in-JS, state management or advanced build tools configuration although I used Vite to simplify development setup. It can even be simplified more such as don't use any JavaScript framework.

I hope this post can be a example for anyone who have no idea what to build yet. I am looking forward to see your projects.

What is a unit test?

Unit test is a test for a small part of program. For example, testing abs function to always output absolute value is a unit test. Unit test is testing in smallest part of a program.

Let's write a unit test

In this post, we will write a unit test for same_line function. same_line checks if the given three points are on the same line.

First, let's write a function. Normally in test-driven development, programmers usually write tests first. But doing that will make IDE or text editor screams in undefined function. Let's write a stub function in sameline.py.

"""Check three points are on the same line or not"""
from typing import Tuple


def same_line(a: Tuple[int, int], b: Tuple[int, int], c: Tuple[int, int]) -> bool:
    """Return True if point a, b, and c are on the same line."""
    # It is a stub.
    return True

I use typing module to make type clear. You don't need to do that, but it is better to have type.

Then we write test cases. In Python, we can use unittest module to write unit test in sameline_test.py.

"""Tests for same line function"""
import unittest

from sameline import same_line


class SameLineTest(unittest.TestCase):
    """Tests for same line function"""

    def test_same_x(self):
        """If x does not change, they are on the same line."""
        self.assertTrue(same_line((1, 2), (1, 3), (1, 4)))
        self.assertTrue(same_line((1, -2), (1, -3), (1, -4)))
        self.assertTrue(same_line((10, 1), (10, 2), (10, -999)))

    def test_same_y(self):
        """If y does not change, they are on the same line."""
        self.assertTrue(same_line((1, 2), (3, 2), (4, 2)))
        self.assertTrue(same_line((1, 4), (3, 4), (4, 4)))
        self.assertTrue(same_line((1, -1), (3, -1), (4, -1)))

    def test_slope(self):
        """If they share same slope, they are on the same line."""
        self.assertTrue(same_line((1, 2), (2, 3), (3, 4)))
        self.assertTrue(same_line((2, 3), (1, 1), (0, -1)))

You can use python -m unittest sameline_test.py to run the unit test. Let's see the result.

Wait a minute. We haven't written anything yet. This happened because the function always returns True and we didn't test a case where the function should return False. Let's add a test.

    # Put this after the previous code.
    def test_triangle(self):
        """If they can form a triangle, they are not on the same line."""
        self.assertFalse(same_line((0, 1), (1, 0), (0, 0)))
        self.assertFalse(same_line((12, 1), (3, 3), (-1, -99)))

It's much better now. Now we know that this function does not work. If the function works, it should pass all tests now.

Note: The program may still contain some bugs even all test cases passed. You can use code coverage to find some uncovered tests.

I have a challenge for you. Try to write same_line function to check if point a, b, and c are in the same line. Optional challenge is to support 3D coordinate or cover more points. I hope this post will be useful to Python developers.

There are many definitions of good code. In this post, good code is understandable, simple, and standard. These qualities will be explained in 4 tips to make your Python code better. These tips can be applied to other languages as well with different tools and convention.

1. Follow PEP 8 convention.

PEP 8 is official guideline for writing Python code. It primarily focuses on readability and consistency such as how to name a variable. Using PEP8 will make code easier to read and understand. Let's take a look at this example.

def getinformationfromshop(shopname):
    # Insert logic here
   return information

You can see it's difficult to read. Better names are getInformationFromShop, GetInformationFromShop, or get_information_from_shop. In PEP8, words should be separated by underscore. The first name is for Java and the second name is for C#. Also, in the second case, it might be mistaken for class instead. The better code looks like this.

def get_information_from_shop(shop_name):
    # Insert logic here
   return information

You can see that it looks better now. Many built-in functions in Python also follow the same convention. There are exceptions for legacy code such as logging module, which is ported from log4j. PEP8 should not be followed if it breaks compatibility.

2. Use formatter and linter.

In PyCharm, there is a built-in formatter. It can fix many issues such as inconsistent spacing or unnecessary parenthesis. Not everything can be fixed with PyCharm auto formatter.

If you are not using PyCharm, you can use other formatters such as black or autopep8 as well.

Other things are covered by linters. Linter is a program that check quality of your code. It can detect some bad things such as unused variables or methods that could be standalone functions.

pylint and flake8 are popular linters for Python.

3. Include documentation with docstring and type hints.

Good code often explains itself. But sometimes it is not enough. That's why we have documentation and docstring. Take a look at this code.

def get_all_links(src):
    # Insert logic here.
    return all_links

It is ambiguous. What is src? What is returned? Now, I add docstring.

def get_all_links(src: str) -> List[str]:
    """Return all hyperlink in the webpage.

    This function will perform HTTP request and fetch all hyperlinks if the page is HTML.

    Args:
        src: URL of the page ex. https://blog.pontakorn.dev
    Returns:
        All hyperlinks in the given page    
    Raises:
        ValueError: If the given page is not HTML
    """
    # Insert logic here
    return all_links

Now, we know that we need to input URL, the function will make a HTTP request, and all hyperlinks are returned. We also know required type.

mypy is a progam for static type checking for Python. You can try it.

4. Review your code.

Try to guess what does this code do.

if x - 6 > 0:
    return True
else if x - 6 <= 0:
    return False

3...2...1...0 The code is comparing if x is greater than 6 or not. You can see that the code is unnecessary complex. It can be just

return x > 6

It sounds ridiculous but it can happen to you time to time especially when you forgot to sleep or don't have enough coffee. Take a break and come back to your code to review.

I hope these 4 tips will help you improve your Python code.

Don't use X to display untrusted content to prevent XSS attack.

It usually appears when it is possible to display raw HTML from string or any input. Let's get into it.

What is XSS anyway?

XSS is about inserting script into someone's else website and browser just executes it. The code is executed the same way as code provided by the site. That means it can access sensitive information and use it. XSS can also use to perform unwanted actions such as making a request, changing HTML content and more.

Example

There is website called superforum.com. Superforum has code like this. I will use Django to explain this but it applies to other frameworks as well.

Request

def create_comment(request, thread_id):
    # The comment editor allows inserting HTML tag
    comment_body = request.POST['comment_body']
    # Insert comment saving logic here
    return redirect(reverse('forum:view', args=[thread_id]))

Template

 <!-- Insert other things here -->
<div class="comment-body">
   {{ comment.comment_body|safe }}
</div>

In Django, safe filter allows string to display as raw HTML. If the user comment this

I like this. <script>window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ", '_blank').focus()</script>

it would be executed right away when someone view the page with this comment. The script above is harmless rickroll. Real attackers would steal your identity, transfer your money, mine Bitcoin, and more.

How can I avoid it in my website?

Don't trust user input. Sanitize the input and escape it help. Common libraries usually have a way to deal with this. For example, Django escapes template by default (unless you use safe).

But, don't do it yourself. There is a terrifying long list of evasions. I don't even know if it is comprehensive or not. If there is a verified library, use it.

More information and references

• More detailed information from OWASP
• That terrifying long list of evasions
• Security in Django It is the framework I used as an example.

Also, I informed my classmates about vulnerabilities. Both projects already fixed this.

Why

I have tried so many stacks to setup my personal website. I tried Gatsby, Gridsome, Hugo, Hexo, and 11ty. Each tool has its advantages and disadvantages. The latest one is Gatsby. I used Gatsby Contentful Template for pontakorn.dev. The one I used is outdated so you might get to a different template.

I found that I take so much time customizing website and rarely publish any content at all. It's never good to me. I need to tweak it many times. It's time-consuming. So, my solution is basically..

I am not doing it.

Yes, I just don't make my website a blog and use Hashnode for blogging platform. I choose Hashnode because I see Hashnode sites many times from daily.dev. My friend also suggest me this so I confirmed my hesitation and move here.

What will happen next?

Well, it will be there but not a blog anymore. I think I will change it into personal portfolio and portal website. It would give me more freedom over technologies because I can put fancy things without affecting readability of my content.

After moving here, I plan to publish in both English and Thai to attract both Thai and international audience. I don't have schedule or any concrete plan yet. I think it should be ready after final exam season.

For everyone who read this, have a nice day!