Predrag Peranović

How To Create Toasts In Remix Project

2023-04-21T00:00:00+00:00

Problem Statement

Using Toasts in a frontend, developed in Remix, Tailwind CSS and DaisyUI should be easy and controlled by the fronted.

We want to:

create toast notifications easily from any React Component,
backend be unaware of toast/notification (no session, cookies, API, etc.).

We don’t want:

to have a dependency on third-party toast libraries.

Solution

To achieve this, we’ll use Redux Toolkit to manage the toasts on our frontend.

Most of the existing and popular toast libraries for React use Redux pattern or implementation internally, so I’ll just use Redux Toolkit and don’t try to come up with some more clever solution.

Detail documentation on how to create a Remix project with Tailwind, DaisyUI, and Redux Toolkit can be found at:

https://remix.run/docs/en/1.15.0;

https://remix.run/docs/en/1.15.0/guides/styling#tailwind-css;

https://tailwindcss.com/docs/guides/remix;

https://redux-toolkit.js.org/tutorials/quick-start;

Let’s create our app:

$ npx create-remix@latest retoasts
> Just the basic
> Remix App Server
> TypeScript
> Y
$ cd retoasts
$ npm install -D tailwindcss @fontsource/roboto @heroicons/react daisyui
$ npx tailwindcss init
$ npm install @reduxjs/toolkit react-redux
$ npm install uuid @types/uuid

Open remix.config.js and add:

module.exports = {
  //...
  future: {
    //...
    unstable_tailwind: true,
  },
  //...
};

Create app/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add paths and daisyUI config to tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

Create redux reducer/slice for managing the theme at app/features/toasts/toastsSlice.ts:

import type { PayloadAction } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";
import { v4 as uuidv4 } from 'uuid';
import type { AppDispatch } from "../store";

const DEFAULT_TOAST_TIMEOUT = 2000

export const ToastLevels = ["info", "success", "warning", "error"]

export type ToastLevel = typeof ToastLevels[0] | typeof ToastLevels[1] | typeof ToastLevels[2] | typeof ToastLevels[3]

export interface Toast {
    id: string,
    message: string,
    level: ToastLevel
}
const initialState: Toast[] = []

export const toastsSlice = createSlice({
    name: "toasts",
    initialState,
    reducers: {
        /**
         * Addes new toast
         */
        pushToast: (state, action: PayloadAction<Toast>) => {
            state.push(action.payload)
        },
        /**
         * Removes existing toast
         */
        removeToast: (state, action: PayloadAction<string>) => {
            const index = state.findIndex(toast => toast.id === action.payload)
            if (index !== -1) state.splice(index, 1)
        },
    }
})

export const { pushToast, removeToast } = toastsSlice.actions
export default toastsSlice.reducer

export const addToast = (
    { message, level }: { message: string, level?: ToastLevel }
) => (
    dispatch: AppDispatch
) => {
        level = level === undefined ? "info" : level

        const newToast = createToast({ message, level })

        dispatch(pushToast(newToast))
        if (level !== "error") {
            setTimeout(() => {
                dispatch(removeToast(newToast.id))
            }, DEFAULT_TOAST_TIMEOUT)
        }
    }

export function createToast(
    { message, level}: { message: string, level: ToastLevel }
): Toast {
    const id = uuidv4()
    return {
        id,
        message,
        level,
    } as Toast
}

Create a redux store and add themeSlice to it at app/features/store.ts:

import { configureStore } from "@reduxjs/toolkit";
import toastsReducer from "./toasts/toastsSlice";

export const store = configureStore({
    reducer: {
        toasts: toastsReducer
    },
    devTools: process.env.NODE_ENV !== 'production',
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Create redux hooks in app/hooks/redux.ts:

import type { TypedUseSelectorHook} from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import type { AppDispatch, RootState } from "../features/store"

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Create Toast component for displaying single toast in app/features/toasts/Toast.tsx:

import {
    XCircleIcon,
    ExclamationTriangleIcon,
    InformationCircleIcon,
    CheckCircleIcon
} from "@heroicons/react/24/outline"
import type { ToastLevel } from "./toastsSlice";
import { removeToast } from "./toastsSlice"
import React from "react"
import { useAppDispatch } from "~/hooks/redux"

export interface ToastProps {
    id: string,
    message: string,
    level: ToastLevel
}

/**
 * Displays single Toast
 */
export function Toast({ id, message, level }: ToastProps) {
    const dispatch = useAppDispatch()

    const [Icon, alertClass] = getToastIconAndClass(level)

    function handleClose(event: React.MouseEvent) {
        event.preventDefault()
        dispatch(removeToast(id))
    }

    return (
        <div className={`z-[1000] w-auto pointer-events-auto shadow-lg alert ${alertClass}`}>
            <div>
                <Icon className="flex-shrink-0 w-6 h-6 stroke-current" />
                <span>{message}</span>
            </div>
            {(level === "error") && <div className="flex-none">
                <button className="link" onClick={handleClose}>
                    close
                </button>
            </div>
            }
        </div>
    )
}

function getToastIconAndClass(level: ToastLevel) {
    if (level === "info") return [InformationCircleIcon, ""]
    if (level === "success") return [CheckCircleIcon, "alert-success"]
    if (level === "warning") return [ExclamationTriangleIcon, "alert-warning"]
    if (level === "error") return [XCircleIcon, "alert-error"]
    return [InformationCircleIcon, ""]
}

Create Toasts component for displaying list of Toast in app/features/toasts/Toasts.tsx:

import { useAppSelector } from "~/hooks/redux"
import { Toast } from "./Toast"

/** Displays taosts stacks at the bottom right corner of the page */
export function Toasts() {
    const toasts = useAppSelector((state) => state.toasts)

    return (
        <div className="absolute inset-0 flex justify-end pointer-events-none">
            <div className="box-border flex flex-col justify-end h-full gap-4 p-8 sm:max-w-1/3">
                <div className="contents">
                    {toasts.map(
                        toast =>
                            <Toast
                                key={toast.id}
                                id={toast.id}
                                level={toast.level}
                                message={toast.message}
                            />
                    )}
                </div>
            </div>
        </div>
    )
}

Change app/root.tsx to:

use redux provider by extracting App component into AppHtml component and surrounding it with the redux provider
add a loader to load theme settings from cookies on the first render (SSR).

import type { LinksFunction } from "@remix-run/node";
import {
    Links,
    LiveReload,
    Meta,
    Outlet,
    Scripts,
    ScrollRestoration
} from "@remix-run/react";

import StyleSheet from "./tailwind.css";
import FontStyles from "@fontsource/roboto/index.css"
import { Provider } from "react-redux";
import { store } from "./features/store";
import { Toasts } from "./features/toasts/Toasts";


export default function App() {
    return (
        <Provider store={store}>
            <AppHtml />
        </Provider>
    );
}

export const links: LinksFunction = () => [
    { rel: "stylesheet", href: StyleSheet },
    { rel: "stylesheet", href: FontStyles },
];

/**
 * Separeted HTML component to be able to access redux store and obtain theme
 */
function AppHtml() {
    return (
        <html lang="en">
            <head>
                <meta charSet="utf-8" />
                <meta name="viewport" content="width=device-width,initial-scale=1" />
                <Meta />
                <Links />
            </head>
            <body className="box-border m-0 text-base, bg-base-200 [font-kerning:normal] min-h-screen">
                <Outlet />
                <Toasts />
                <ScrollRestoration />
                <Scripts />
                <LiveReload />
            </body>
        </html>
    );
}

Lets now test toasts by replacing app/routes/_index.tsx where we will add a navigation bar and buttons to display toasts:

import type { V2_MetaFunction } from "@remix-run/react";
import { Outlet } from "@remix-run/react";
import { addToast } from "~/features/toasts/toastsSlice";
import { useAppDispatch } from "~/hooks/redux";

export const meta: V2_MetaFunction = () => {
    return [{ title: "Remix Toasts" }];
};

export default function Index() {
    const dispatch = useAppDispatch()
    return (
        <>
            <div className="sticky top-0 z-30 w-full transition-all duration-300 shadow-sm bg-opacity-60 bg-base-100 text-base-content backdrop-blur">
                <nav className="navbar min-h-12 bg-base-100">
                    <div className="flex items-center flex-1 gap-1 lg:gap-2">
                        <div className="inline-flex text-lg font-semibold transition-all duration-200 md:text-2xl">
                            <span className="uppercase text-primary">
                                Application Title
                            </span>
                        </div>
                    </div>
                    <div className="flex-0">
                        {/* Right side of navbar */}
                    </div>
                </nav>
            </div>
            <div className="m-4">
                <button
                    className="btn btn-sm"
                    onClick={() => dispatch(addToast({ message: "Info toast" }))}
                >
                    Add Info Toast
                </button>
                <button
                    className="btn btn-sm btn-success"
                    onClick={() => dispatch(
                        addToast({ message: "Everyting is gooing realy well", level: "success" })
                    )}
                >
                    Add Success Toast
                </button>
                <button
                    className="btn btn-sm btn-warning"
                    onClick={() => dispatch(
                        addToast({ message: "Be carefull what are you doing", level: "warning" })
                    )}
                >
                    Add Warning Toast
                </button>
                <button
                    className="btn btn-sm btn-error"
                    onClick={() => dispatch(
                        addToast({ message: "Ka Buuuummm, you are dead!", level: "error" })
                    )}
                >
                    Add Error Toast
                </button>
            </div>
            <Outlet />
        </>
    )
}

To run the application execute the following:

$ npm run dev

Demo

The demo code is available at https://github.com/PredragPeranovic/retoasts.

If you have any suggestion or question you can create an Issue on GitHub or contact me on Twitter at @peranp.

How To Change Theme In Remix Project

2023-04-11T00:00:00+00:00

Problem Statement

Users should be able to switch between a light and dark theme in our Remix app, where we’re using Tailwind CSS with DaisyUI components for styling HTML.

We want the theme change to be:

instant,
without the need to communicate with backend, and
we want the selected theme to be remembered after the user leaves the page or refreshes it.

We also want that:

any React Component inside the app can access or change theme.

Solution

To achieve this, we’ll use Redux Toolkit to manage the theme state of our frontend. We’ll also store the current theme in a cookie so that the server can retrieve it and serve the appropriate theme when the user refreshes or navigates to the page for the first time (basically when page is rendered on the server).

Detail documentation on how to create a Remix project with Tailwind, DaisyUI, and Redux Toolkit can be found at:

https://remix.run/docs/en/1.15.0;

https://remix.run/docs/en/1.15.0/guides/styling#tailwind-css;

https://tailwindcss.com/docs/guides/remix;

https://redux-toolkit.js.org/tutorials/quick-start;

Let’s create our app:

$ npx create-remix@latest retheme
> Just the basic
> Remix App Server
> TypeScript
> Y
$ cd retheme
$ npm install -D tailwindcss @fontsource/roboto @heroicons/react daisyui
$ npx tailwindcss init
$ npm install @reduxjs/toolkit react-redux

Open remix.config.js and add:

module.exports = {
  //...
  future: {
    //...
    unstable_tailwind: true,
  },
  //...
};

Create app/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add paths and daisyUI config to tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark"],
    darkTheme: "dark",
  },
};

Create redux reducer/slice for managing the theme at app/features/theme/themeSlice.ts:

import type { PayloadAction} from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit"

export const COOKIE_NAME = "theme"

export const ThemeStates = ["light", "dark"]

export type ThemeState = typeof ThemeStates[0] | typeof ThemeStates[1]

export const initialState: ThemeState = "light"

export const themeSlice = createSlice({
    name: "theme",
    initialState: initialState as ThemeState,
    reducers: {
        changeTheme: (state) => {
            const newTheme = state === "light" ? "dark" : "light"
            setThemeCookie(newTheme)
            return newTheme
        },
        setTheme: (state, action:PayloadAction<ThemeState>) => {
            const newTheme = action.payload
            if (newTheme !== 'dark' && newTheme !== 'light') {
                return state
            }
            setThemeCookie(newTheme)
            return newTheme
        }
    }
})

export const { changeTheme, setTheme } = themeSlice.actions
export default themeSlice.reducer

/** Saves current theme in plain cookie */
function setThemeCookie(theme:ThemeState){
    if (typeof window === "object") {
        document.cookie = `${COOKIE_NAME}=${theme}; samesite=lax; max-age=${60*60*24*365}`
    }
}

Create a redux store and add themeSlice to it at app/features/store.ts:

import { configureStore } from "@reduxjs/toolkit";
import themeReducer from "./theme/themeSlice";

export const store = configureStore({
    reducer: {
        theme: themeReducer
    },
    devTools: process.env.NODE_ENV !== 'production',
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Create redux hooks in app/hooks/redux.ts:

import type { TypedUseSelectorHook} from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import type { AppDispatch, RootState } from "../features/store"

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Create a useTheme hook for getting the current theme in app/features/theme/useTheme.ts:

import { useEffect } from "react"
import { useAppDispatch, useAppSelector } from "~/hooks/redux"
import type { ThemeState} from "./themeSlice";
import { setTheme } from "./themeSlice"
import { useRouteLoaderData } from "@remix-run/react"
import type { CookieSettings } from "../cookieSettings/types";


/** Hook for getting current theme reagardles if it is client side of Server Side rendering */
export function useTheme() {
    const dispatch = useAppDispatch()
    // get theme from redux state
    const theme = useAppSelector((state) => state.theme)

    // get theme from cookie (usefull when server side rendering)
    const cookieSettings = useRouteLoaderData("root") as CookieSettings
    const cookieTheme = cookieSettings.theme

    const effectiveTheme:ThemeState = (typeof window === "undefined") ? cookieTheme : theme

    useEffect(() => {
        // on update theme in redux from cookie on first load
        if (cookieTheme !== theme) {
            dispatch(setTheme(cookieTheme))
        }
    }, [])

    return effectiveTheme
}

Create ThemeSwitcher button for swithching between themes in app/features/theme/ThemeSwitcher.tsx:

import { useAppDispatch, } from "~/hooks/redux"
import { SunIcon, MoonIcon } from "@heroicons/react/24/outline"
import { changeTheme, initialState as defaultTheme } from "./themeSlice"
import { useTheme } from "./useTheme"

/**
 * Button for top navigation bar for switching theme between light and dark
 */
export function ThemeSwitcher() {
    const dispatch = useAppDispatch()
    const theme = useTheme()

    return (
        <label className="items-center flex-none swap btn btn-sm btn-ghost btn-circle" title="Change theme">
            <input type="checkbox"
                checked={theme !== defaultTheme}
                onChange={() => dispatch(changeTheme())}
            />
            <SunIcon className="w-5 h-5 stroke-current md:w-6 md:h-6 swap-on" />
            <MoonIcon className="w-5 h-5 stroke-current md:w-6 md:h-6 swap-off" />
        </label>
    )
}

Create a helper for getting plain text cookies values on the backend in app/helpers/cookieSettings.server.ts.

import type { ThemeState } from "../features/theme/themeSlice";
import { COOKIE_NAME as THEME_COOKIE_NAME } from "../features/theme/themeSlice";
import { ThemeStates, initialState as defaultTheme } from "../features/theme/themeSlice"

/**
 * Returns plain value from cookie
 * @param request current request
 * @param name name of the cookie value
 * @returns null or value as string
 */
export function getCookieValue(request: Request, name: string): string | null {
    const cookieHeader = request.headers.get("Cookie")
    if (cookieHeader === null) {
        return null
    }

    const cookies = Object.fromEntries(cookieHeader.split("; ").map(v => v.split(/="?([^"]+)"?/)))
    const value = cookies[name]
    if (value === undefined) {
        return null
    }
    return value as string
}

/**
 * Returns theme from cookie or default theme
 */
export function getThemeFromCookie(request: Request): ThemeState {
    const themeInCookie = getCookieValue(request, THEME_COOKIE_NAME)

    if (themeInCookie && ThemeStates.includes(themeInCookie)) {
        return themeInCookie as ThemeState
    }
    return defaultTheme as ThemeState
}

Create app/helpers/cookieSettings.types.ts:

import type { ThemeState } from "../features/theme/themeSlice";
/**
 * Settings saved as plain cookie values used for
 * theming, language and similar settings to be
 * saved across visits to the app
 */
export interface CookieSettings {
    theme: ThemeState
}

Change app/root.tsx to:

use redux provider by extracting App component into AppHtml component and surrounding it with the redux provider
add a loader to load theme settings from cookies on the first render (SSR).

import type { LinksFunction, LoaderArgs } from "@remix-run/node";
import type {
    ShouldRevalidateFunction} from "@remix-run/react";
import {
    Links,
    LiveReload,
    Meta,
    Outlet,
    Scripts,
    ScrollRestoration
} from "@remix-run/react";

import StyleSheet from "./tailwind.css";
import FontStyles from "@fontsource/roboto/index.css"
import { Provider } from "react-redux";
import { store } from "./features/store";
import { useTheme } from "./features/theme/useTheme";
import { getThemeFromCookie } from "./helpers/cookieSettings.server";
import type { CookieSettings } from "./helpers/cookieSettings.types";


export default function App() {
    return (
        <Provider store={store}>
            <AppHtml />
        </Provider>
    );
}

/** Returns user settings from cookies, loaded only once */
export async function loader({ request }: LoaderArgs) {
    const theme = getThemeFromCookie(request)

    return {
        theme
    } as CookieSettings
}
export const shouldRevalidate: ShouldRevalidateFunction = () => false

export const links: LinksFunction = () => [
    { rel: "stylesheet", href: StyleSheet },
    { rel: "stylesheet", href: FontStyles },
];

/**
 * Separeted HTML component to be able to access redux store and obtain theme
 */
function AppHtml() {
    const theme = useTheme()

    return (
        <html lang="en" data-theme={theme}>
            <head>
                <meta charSet="utf-8" />
                <meta name="viewport" content="width=device-width,initial-scale=1" />
                <Meta />
                <Links />
            </head>
            <body className="box-border m-0 text-base, bg-base-200 [font-kerning:normal] min-h-screen">
                <Outlet />
                <ScrollRestoration />
                <Scripts />
                <LiveReload />
            </body>
        </html>
    );
}

Lets now use the theme change button in our application by simply replacing app/routes/_index.tsx where we will add a navigation bar and button to change the theme:

import type { V2_MetaFunction } from "@remix-run/react";
import { Outlet } from "@remix-run/react";
import { ThemeSwitcher } from "~/features/theme/ThemeSwitcher";

export const meta: V2_MetaFunction = () => {
    return [{ title: "Remix Theme Change" }];
};

export default function Index() {
    return (
        <>
            <div className="sticky top-0 z-30 w-full transition-all duration-300 shadow-sm bg-opacity-60 bg-base-100 text-base-content backdrop-blur">
                <nav className="navbar min-h-12 bg-base-100">
                    <div className="flex items-center flex-1 gap-1 lg:gap-2">
                        <div className="inline-flex text-lg font-semibold transition-all duration-200 md:text-2xl">
                            <span className="uppercase text-primary">
                                Application Title
                            </span>
                        </div>
                    </div>
                    <div className="flex-0">
                        <ThemeSwitcher />
                    </div>
                </nav>
            </div>
            <p className="max-w-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, aut modi.
                Animi exercitationem aspernatur hic impedit sint distinctio!
                Aperiam illum eaque perspiciatis distinctio eligendi dignissimos explicabo asperiores facere velit qui.
            </p>
            <Outlet />
        </>
    )
}

To run the application execute the following:

$ npm run dev

Demo

The demo code is available at https://github.com/PredragPeranovic/retheme.

If you have any suggestion or question you can create an Issue on GitHub or contact me on Twitter at @peranp.

How we build a Task Manager for Architects

2022-06-30T09:00:00+00:00

How do we get the idea?

It all started when my brother, who works as the lead architect in an architectural bureau, came to visit my family. His job is to communicate with investors and coordinate the work of architects, engineers, legal teams, and contractors. He is doing a little bit of everything and lots of management.

We sat on the couch, talking about our families and work. At one moment he casually mentions his struggle to explain tasks and delegate jobs to people working with him.

So I started to ask questions about his problem. After half hour we identified two main sources for his problem:

First, it is hard to explain what to fix and what to draw in CAD programs using only words;
Second, every team member/contractor uses multiple communication tools: emails, chat apps, telephone, etc., so it is hard to remember and find what, when and where something was decided.

So we concluded that some kind of task manager where he can draw sketches on images/screenshots would solve his problem. He tried to use Asana, google sheets, but without success.

I was already thinking about building a small Sass app to validate is the Jembe web framework good or not. The problem of my brother looked like a good fit for me.

We set our goals

So we decided to go ahead and develop a “Task manager for Architects” to accomplish the following goals:

Make the job easier for my brother and other architects;
Learn how to build and market a Sass app;
Validate readiness of the the Jambe web framework.

We are building TaskClip as a side project and development took us more time than we anticipated. We were hoping to spend up to three months working on it, but it took us close to six months just to have basic functionalities working.

The main reasons for spending so much time, as you may suspect was:

Jembe framework had its bugs,
We designed UI/UX casually and spend too much time fixing it;
I miscalculated the time needed to develop app administration to be self-serving. This was my first sass project after all;

Did we accomplish our goals and build something useful?

My brother is satisfied, he is using TaskClip to communicate with his team and contractors, and their impressions are more than positive.

I’m not so convinced. My problem is that only he and his team are using the app. I need more architects to validate that TaskClip is a good solution for a real problem.

So, the next steps will be to call friends and college architects to try it out and give us honest opinions (preferably with their credit cards :) ). Something we should do much earlier.

Anyway, now we will learn, the hard way, about problem validation, positioning, and marketing.

Regarding my goal: to validate Jembe’s readiness for production use.

While working on TaskClip I fixed around 15 bugs in Jembe and didn’t make any changes in API or internal code structure.

Does Jembe have more bugs? Yes, it has.
Will Jembe gain performance and benefits with code restructure? Yes, it will.

Nevertheless, for me, it is ready to be used for web app development. For others to develop using Jembe, first I need to write some documentation :/ .

What have I learned?

I read a lot of books and articles about problem validation, acquiring and validating sales channels, and the need to do presales, but due to my inexperience I believed that knowing that a problem exists for a group of people who are willing to pay for a solution is enough to “validate the problem”.

In retrospect, my “believe” was convenient to me because:

it’s easier to do what I already know how to do,
it’s hard to do new and uncomfortable things with the unpredictable outcome.

It was so easy to say: Scratching my brother’s “itch” and knowing that more architects with the same problem exist is “problem validation”.

After six months we created MVP, and started to work on customer stories and profiles, to look into sales channels and create a product front page. It took us about 15 to 20 days to finish it. We learned that:

It’s hard to create a sales channel because architects don’t have active online communities where you can freely talk to them. I don’t count sites where they post beautiful 3D renders or pictures of houses etc.
TaskClip solves the problem for the lead architect but not for bureau owners, who are deciding on monthly spending.

All this concludes that making a profit from TaskClip will be very difficult.

From this perspective, if I created a customer profile, and try to do presale in the worst case I’ll lose one month and then find a new project idea “to learn how to sell online and validate Jembe Framework”.

It’s like my professor used to say: Knowledge is in the hands not in the brain. (Just knowing something by reading it is not applicable knowledge, you need a lot of practice and hands experience.)

The current state of the project

If you are interested in current TaskClip metrics are:

10 active users using it daily;
around 60 site visits per day;
around 2000 hits per day;
more than 300 tasks;
0 € in revenue;

Not very impressive, actually quite the opposite.

After we contact more architects and get more feedback, we’ll decide about the TaskClip future.

It’ll eventually boil down to: Can we find a way, before end of this year, to sustain product development and maintenance, if not TaskClip will exist only for my brother to use it and for me to practice marketing skills and promote the Jembe framework, without any improvements.

Want to help us?

If you are an architect who wants to help us build the “Task manager for architects”, check it out at https://taskclip.me and give us your honest opinion or comment at predrag.peranovic@taskclip.me.

All the best, and thanks for reading.

Three Ways To Customize HTML Upload Button

2022-02-08T23:09:00+00:00

1. Call input.click() With Javascript

<button type="button" onclick="document.getElementById('fileUpload').click()">
    Upload file
</button>
<input type="file" id="fileUpload" style="display:none">

button {
  background-color: skyblue;
  border-radius: 4px;
  border: none;
  height: 32px
}
button:hover {
  background-color: darkblue;
  color: lightblue;
}

Demo at codepen

Pros

Full freedom to customize the button;
Widely supported by all browsers;
I like it very much;

Cons

Javascript is used with HTML and CSS;
File input must be uniquely selectable by Javascript;
Default “input element” isn’t displayed so you must add custom HTML to display uploaded/selected file;

2. Styling Label as a Button

<label for="fileUpload" class="fileUploadLabel">Upload file</label>
<input type="file" id="fileUpload" style="display:none">

.fileUploadLabel {
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: skyblue;
  border: none;
  height: 32px;
  width: fit-content;
  padding: 0 8px;
  cursor: pointer;
}
.fileUploadLabel:hover {
  background-color: darkblue;
  color: lightblue;
}

Demo at codepen.

Pros

Full freedom to customize the button;
It works with just HTML and CSS;
Widely supported by all browsers;
Default “input element” isn’t displayed;

Cons

Upload “button” isn’t focusable with keyboard;
Default “input element” isn’t displayed so you must add custom HTML to display uploaded/selected file;

3. Use ::file-selector-button CSS pseudo element

<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">

input[type="file"]::-webkit-file-upload-button, 
input[type="file"]::file-selector-button {
  border-radius: 4px;
  background-color: skyblue;
  border: none;
  height: 32px;
}

input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover{
  background-color: darkblue;
  color: lightblue;
}

Demo at codepen.

Pros

Part of CSS specification;

Cons

Part of “fragile”, “unfinished” and not wiedly supported CSS specification;
Limited browser support;
Must use browser-specific pseudo-classes to support different browsers;
Limited ability to style “input element” next to the button;
Don’t like it at all;

Ignorant Programer doing Digital Marketing

2021-08-23T09:53:00+00:00

This is a story about how I lose belive that “A decent product will attract prospects by itself and naturally convert visitors to users.”.

I started to do “digital marketing” after building what I was thinking is a decent website for the future product, by:

Tweeting about building product;
Writing posts on personal blog;
Running Google ads for a short time to bring traffic to the product website;


A “Decent” looking website for future product

The results of all efforts above are depressing.

I got ten followers on tweeter after four months of tweeting;
I got two subscribers to the newsletter (and one is my friend who wanted to support me);
I got two followers on GitHub;

All in all, the conversion rate is well below 1% percent.


Google analytics for jembe.io	Google analytics for peranp.me


Twitter analytics for peranp	Google Ads analytics

My conclusions so far are:

There is no feedback when doing digital marketing. You can only look at statistics and try to figure out what’s going on;
When average organic traffic is less than one visitor per day, a statistic is useless;
It’s useless to use Google ads before you get decent organic traffic and conversion rate;
The only way to improve marketing material is to watch your friends, coworkers, and random people interacting with it;
Tweeting one or two times per week is not enough;
Tweets must be way more useful or interesting to readers;
Blog post must be published regularly and must be interesting or useful;

What I need to do:

Step up my game and tweet at least once per day;
Write more content on the blog, at least once per week;
Write interesting or informative content as much as possible but prioritize developing writing habit and posting regularly;
Implement the following changes to the jembe.io website and see how it will perform:
1. Instead of using examples to gradually introduce the framework, use one example representing the real potential and benefits of the framework. (After reading details about technical implementation, a friend want to explain to me how it can’t work with examples in a different context trying to achieve different goals);
2. Better explain who should use the framework and for what purpose;
3. Better explain when you should NOT use Jembe;
4. Better explain the benefits of using Jembe instead of other frameworks.
5. Add follow me on GitHub call to action instead of signup for the newsletter.

All conclusions above can be completely wrong, the time will tell.

Lots of work to do, and I can’t wait to see the result.

Time to write(1h 30min)

How to deploy Flask app on Ubuntu 20.04 with Nginx and Gunicorn

2021-04-12T22:30:00+00:00

Lets define minimum conditions of acceptable deployment as:

Application sits behind “proper” web server in this case Nginx;
Application runs on ”proper” application server in this case Gunicorn;
Application startup or shutdown is managed by native Ubuntu service manager in this case systemd;
Application data, configuration and install folders are separated from each other so they can be independently backed up and restored.
Application upgrade is done by executing pip install –upgrade.

Create Flask Demo Application

We need a Flask application to deploy, lets build the “simplest” one. I’ll develop app on an Ubuntu machine with Python 3.8 and Poetry, you can use whatever you are familiar with.

In case you are developing on Ubuntu 18.04/20.04 you can prepare development environment with:
$ sudo apt install python3.8 python3.8-dev python3.8-venv
$ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python3.8 - 

Create “demoapp” application directory and initialize Python virtual environment (venv):

$ mkdir ~/demoapp
$ cd ~/demoapp
$ poetry init

When executing poetry init accept all defaults answers except for questions about defining dependencies interactively where you should choose “no”. Poetry will create venv inside ~/.cache/pypoetry/virtualenvs/demoapp-xxxx just for this application. That you can activate by executing poetry shell inside ~/demoapp.

Activate python venv and create demoapp directory structure:

$ cd ~/demoapp
$ poetry shell
(demoapp-xx) $ poetry add flask
(demoapp-xx) $ mkdir demoapp
(demoapp-xx) $ mkdir demoapp/templates

(demoapp-xx) $ in front of prompt indicates that python venv is active.

Add following lines inside demoapp/pyproject.toml at end of [tool.poetry] section just before [tool.poetry.dependencies]:

packages = [
    { include = "demoapp" }
]

Create demoapp/__init__.py:

import os
from flask import Flask, render_template


def create_app(config=None):
    instance_path = os.environ.get("FLASK_INSTANCE_PATH", None)
    app = Flask(
        __name__, 
        instance_relative_config=True, 
        instance_path=instance_path
    )
    if config is not None:
        if isinstance(config, dict):
            app.config.from_mapping(config)
        elif config.endswith(".py"):
            app.config.from_pyfile(config)
    else:
        app.config.from_pyfile("config.py", silent=True)
    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass

    @app.route("/")
    def index():
        """Servers intex.html"""
        return render_template("index.html")

    return app

Create demoapp/templates/index.html:

<html>
<body>
    Hello from Demo application.
</body>
</html>

You will notice that I’m preparing this app to be packaged for easy deployment by setting up instance_path and instance_relative_config to Flask and by adding packages directive in pyproject.toml.

To test your app run inside ~/demoapp:

(demoapp-xx) $ export FLASK_APP=demoapp
(demoapp-xx) $ flask run

Open up http://localhost:5000 in the browser and you should see page displaying “Hello from Demo application”.

Prepare “demoapp” Package for Deployment

Create demoapp-0.1.0-py3-none-any.whl and demoapp-0.1.0.tar.gz distribution packages inside the ~/demoapp/dist:

(demoapp-xx) $ poetry build

Configuring Ubuntu 20.04

I’ll assume following:

You have root privileges on fresh installation of Ubuntu 20.04;
Acme company has built this “demoapp”;
You’re creating an “acme” user to be responsible for managing demoapp;
You’re hosting the app on a public server named server.acme.com;
You know how to setup domain name to point on your server

Add User Responsible for Managing Application

Upgrade system, add acme user and allow acme to sudo as root:

# apt update
# apt upgrade
# adduser acme
# usermod -aG sudo acme

Install Nginx

# apt install nginx

Go to http://server.acme.com to check if website is running.

If browser is constantly trying to redirect you to https://server.acme.com use browser incognito/private mode to access website over http.

Configure Nginx to Use HTTPS With “letsencrypt.org” Certificate

I’ll use acme.sh script to obtain and renew certificates. Install it with:

#   curl https://get.acme.sh | sh -s email=my-email@acme.com

Close and reopen your terminal to start using acme.sh.

Obtain and install certificate:

# acme.sh --issue -d server.acme.com  -w /var/www/html/
# mkdir -p /etc/nginx/certs/server.acme.com
# acme.sh --install-cert -d server.acme.com  \
    --key-file /etc/nginx/certs/server.acme.com/key.pem \
    --fullchain-file /etc/nginx/certs/server.acme.com/cert.pem \
    --reloadcmd "service nginx force-reload"

acme.sh will add cronjob to renew and reinstall certificates when they expires.

Import Certificates in Nginx

Change /etc/nginx/sites-enabled/default to:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    return 301 https://$host$request_uri;
}
server {
        listen 443 default_server ssl http2;
        listen [::]:443 default_server ssl http2;

        server_name _;

        ssl_certificate /etc/nginx/certs/acme.jembe.io/cert.pem;
        ssl_certificate_key /etc/nginx/certs/acme.jembe.io/key.pem;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
}

Now every HTTP request will be redirected to HTTPS. This is good for now but we’ll change this after installing our demoapp.

Enable Firewall

Use the simplest firewall configuration as:

# ufw allow ssh
# ufw allow http
# ufw allow https
# ufw enabled

Check firewall status with # ufw status.

Deploy Flask Application

We’ll install our Flask “demoapp” under /opt/acme as user acme.

Preparing venv and Directory Structure

Install appropriate python version (in this case Python 3.8):

$ sudo apt install python3.8 python3.8-dev python3.8-venv

Create deployment directory structure:

$ sudo mkdir /opt/acme
$ sudo chown acme.acme /opt/acme
$ cd /opt/acme
$ mkdir bin envs demoapp

Following dirs are created for:

/opt/acme/bin: all bash scripts realated to our demoapp;
/opt/acme/envs: python virtual enviroments;
/opt/acme/demoapp: application configuration and data files;

Create venv:

$ python3.8 -m venv /opt/acme/envs/demoapp

Activate venv:

$ source /opt/acme/envs/demoapp/bin/activate

Activate venv with .bash_aliases

If you are lazy as me, you can add following line in ~/.bash_aliases, to activate venv by typing demoapp:

alias demoapp='export PS1="\u:\W\$ ";source /opt/acme/envs/demoapp/bin/activate;cd /opt/acme/demoapp'

After you close and reopen your terminal you can type demoapp to activate python venv and go to application directory.

Install “demoapp”

(demoapp) $ cd /opt/acme/demoapp
(demoapp) $ pip install --upgrade pip
(demoapp) $ pip install /home/acme/demoapp-0.1.0-py3-none-any.whl
(demoapp) $ mkdir instance data

(demoapp) $ indicates that you should run following commands in python venv for demoapp. I’m also assuming that you already copied package with flask demoapp in /home/acme.

Directory /opt/acme/demoapp/instance is flask instance folder.

I usually use /opt/acme/demoapp/data to save all app data that need to be saved directly on hard disk.

Create /opt/acme/demoapp/instance/config.py:

SECRET_KEY = "put some random secret key here"

You can generate random secret key with:

$ python3.8 -c "import os; print(os.urandom(24))"

Install and Configure Gunicorn

(demoapp) $ pip install gunicorn

Create /opt/acme/demoapp/gunicorn.conf.py:

import pathlib


wsgi_app = "demoapp:create_app()"

chdir = str(pathlib.Path(__file__).parent.absolute())

raw_env = [
    "FLASK_INSTANCE_PATH={}/instance".format(chdir),
]

Settings in gunicorn.conf.py file will tell gunicorn how to start our demoapp and also will tell demoapp where it is its INSTANCE_PATH directory that contains application configuration.

Create systemd Scripts for Starting and Stoping Gunicorn

/etc/systemd/system/demoapp.socket:

[Unit]
Description=Demo App socket    

[Socket]
ListenStream=/run/demoapp.sock

[Install]
WantedBy=sockets.target

/etc/systemd/system/demoapp.service:

[Unit]
Description=Demo App production service
Requires=demoapp.socket
After=network.target

[Service]
PermissionsStartOnly = true
User=acme
Group=acme
PIDFile=/run/demoapp/demoapp.pid
WorkingDirectory=/opt/acme/demoapp/
Environment=LANG=en_US.UTF-8
Environment=PATH=/opt/acme/envs/demoapp/bin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin
ExecStartPre=/bin/mkdir /run/demoapp
ExecStartPre=/bin/chown -R acme:acme /run/demoapp
ExecStart=/opt/acme/envs/demoapp/bin/gunicorn \
	--user acme \
	--group acme \
	--config /opt/acme/demoapp/gunicorn.conf.py \
	--workers 4 \
	--log-level warn \
	--error-logfile /var/log/gunicorn/demoapp.log \
	--bind unix:/run/demoapp.sock \
	--pid /run/demoapp/demoapp.pid 
PrivateTmp=true
ExecReload=/bin/kill -s HUP $MAINPID
ExecStop=/bin/kill -s TERM $MAINPID
ExecStopPost=/bin/rm -rf /run/demoapp
PrivateTmp=true

[Install]
WantedBy=multi-user.target

Execute:

$ sudo mkdir /var/log/gunicorn
$ sudo chown acme.acme /var/log/gunicorn
$ sudo systemctl enable demoapp.service
$ sudo systemctl enable demoapp.socket
$
$ sudo systemctl start demoapp.socket

You can use sudo systemctl status|start|stop|enable|disable demoapp.service commands to manage or check status of demoapp services.

Configure Nginx to Proxy Requests to Gunicorn

Open /etc/nginx/sites-enabled/default configured previously and change location / directive to:

	location / {
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_redirect off;
		proxy_pass http://unix:/run/demoapp.sock;
		access_log  /var/log/nginx/demoapp.access.log;
		error_log  /var/log/nginx/demoapp.error.log;
	}

$ sudo systemctl restart nginx

Serve Flask App with URL Prefix

Open /opt/acme/demoapp/instance/config.py and add line:

APPLICATION_ROOT = “/demoapp/”

Open /etc/nginx/sites-enabled/default and change location / directive to:

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}
	location /demoapp {
		proxy_set_header SCRIPT_NAME /demoapp;

		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_redirect off;
		proxy_pass http://unix:/run/demoapp.sock;
		access_log  /var/log/nginx/demoapp.access.log;
		error_log  /var/log/nginx/demoapp.error.log;
	}

How to Upgrade App

Copy new version of demoapp into /home/acme and login to server:

$ demoapp
(demoapp) $ pip remove demoapp
(demoapp) $ pip install /home/acme/demoapp-0.2.0-py3-none-any-whl
(demoapp) $ sudo systemctl restart demoapp.service

When you are installing or upgrading “real” Flask app that uses database, saves data on local storages and access other system or network resources you will probably need to execute additional commands like flask migrate etc.

Feedback

If you have any feedback or you want to see more posts like this, let me know on Twitter.

Why do software projects miss deadlines?

2021-03-24T14:40:00+00:00

Yesterday I built this blog using Jekyll and Github pages. I followed the tutorial “Build a Blog In Five Minutes”, but it took me more than three hours to do it.

Am I that slow, or am I doing something wrong?

In my defense, I spend most of the time:

setting up the project on GitHub;
setting up Google Analytics;
configuring DNS records;
installing Ruby on my laptop;
placing a picture of me and polishing it with CSS;
writing a message in the footer.

Maybe, if I had everything prepared in advance, I would spend 5 minutes building the blog.

This reminds me of my own mistake:

Placing an action button on the page should not take me more than one minute, right?
Wrong!!! I usually spend more than five minutes per button.
Why? Because I’m forgetting about the time needed to:
- type the code;
- find a good icon;
- adjust margins and padding;
- polish look with CSS;

Maybe there is a pattern here:

when the job is dominantly creative or engaging, we tend to overlook uncreative and grinding work;
forcing us to underestimate the time needed to finish the project.

The proper way to estimate the deadline

Give your initial estimate as you usually do;
Deliberately think about all the grinding work that needs to be done, and add time for it;
Multiply everything with 2 or 3 and hope for the best;
As you work, periodically review and adapt the project scope to hit the deadline.