Forem: Paul

I published my first Desktop App after 6 months of work — Everything I learnt

Paul — Tue, 24 Jun 2025 10:00:16 +0000

So, Python being among the most used Programming Language, by both professionals as well as hobbyist. From basic projects to large scale LLMs use Python

Something that always makes your project look professional is a GUI,but learning GUI especially if you never had past experience creating GUIs can be difficult.

So, I spent months working on PyUIBuilder, so it’s easier for Python Developers to develop Python GUIs easily.

I started by writing down the requirements.

Should be accessible in both web and Desktop version.
Should be able to export clean, readable, python Code for the framework/library.
Users should be able easily switch between multiple GUI libraries, such as tkinter, customtk etc.
It should support 3rd party widgets, like Calendar, Clock etc.
It should support layout managers and have an inbuilt code-editor

These were some of my primary requirements.

Since I wanted it to be accessible on both web as well as on Desktop, I decided to go with Javascript and use React library to speed things up.

Months spent…

For the first month, I only worked on a prototype, built the overall workspace, my first version didn’t include a code editor, Desktop app or templates. I focused primarily on just building a small working demo, and shared my project on Reddit. After a successfully sharing my project on Reddit, I gained interest of quite a number of python developers.

For the second month, I focused on fixing the layout manager for tkinter. If you have worked with tkinter you’d know it’s a bit different from the rest of the frameworks/libraries, you’ve worked with, especially pack manager. This one really took me a long time to figure out. You can refer this great video on Tkinter Layout manager

The next few months, I spent on fixing bugs and adding more features to the web app, until this point there was no Desktop app.

On the web version you had to export code every time and run in manually to see your GUI in action, but a live preview would eliminate such requirement and help debug faster

The Desktop App

Now Desktop app was necessary as you can’t really run python on the webbrowser unless you load some big library which would eventually slow down the load time.

So, my obvious choice was to go with Electronjs as it has a large community around it and I didn’t have to rewrite the entire thing from scratch. I added a live preview feature, so users can easily preview it without having to manually export code and test it.

Building and compiling for different OS
Now, I work on a linux laptop, so I don’t have windows or MacOs for that matter. To make it work for different OS, you generally have to compile it on that specific OS. Suppose you intend to release for Mac, you need to complie on a Mac machine.

Github Actions

Now since I didn’t have windows or a Mac machine, I came across Github Actions. Now this is a life saver especially if you want to release production builds.

All I had to do was to add a yml file .github/workflows folder and Github would use cloud machines to complie the build files for different OS based on specifications on your .yml file.

My Yml file looks something like this

name: Build Electron App

on:
  push:
    tags:
      - 'v*'
    branches:
      - main

jobs:
  build:
    strategy:
      matrix:
        include:
          - os: ubuntu-latest
            platform: linux
          - os: windows-latest
            platform: win
          - os: macos-13
            platform: mac
            arch: x64
          - os: macos-latest
            platform: mac
            arch: arm64
    runs-on: ${{ matrix.os }}

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Create .env-cmdrc.json
        run: |
          echo '{
            "production": {
              "PUBLIC_URL": "./",
              "REACT_APP_ANALYTICS_SCRIPT_ID": "${{ secrets.REACT_APP_ANALYTICS_SCRIPT_ID }}",
              "API_ENDPOINT": "${{ secrets.API_ENDPOINT }}",
              "GOOGLE_CLIENT_ID": "${{ secrets.GOOGLE_CLIENT_ID }}",
              "GOOGLE_ELECTRON_CLIENT_ID": "${{ secrets.GOOGLE_ELECTRON_CLIENT_ID }}",
              "GOOGLE_ELECTRON_CLIENT_SECRET": "${{ secrets.GOOGLE_ELECTRON_CLIENT_SECRET }}"
            }
          }' > .env-cmdrc.json

      - name: Package Electron app
        run: |
          npm run build:electron-combine
          npx electron-builder build --publish=never --${{ matrix.platform }} --${{ matrix.arch || 'x64' }}

      - name: Upload dist artifacts
        uses: actions/upload-artifact@v4
        with:
          name: ${{ matrix.os }}-${{ matrix.arch || 'x64' }}-artifacts
          path: dist/

      - name: Publish release
        if: startsWith(github.ref, 'refs/tags/')
        uses: softprops/action-gh-release@v1
        with:
          files: dist/**

Ofc, you, might have to change the above code a bit depending on your needs.

And voila! I was able to complie for all 3 OS without having to spend on an expensive machines.

Code Signing hassle

Now every desktop app has to be code signed, especially for Mac OS and Windows, otherwise you’d be hit with a firewall popup saying “unverified publisher, move to bin”.

The problem with code signing is that it’s pretty expensive especially if you are a solo developer. There isn’t really cheap option when it comes to code signing.

While people can still ignore the warning and continue to use your app, many people would just stay away from downloading it, because of the popup.

So, since I couldn’t afford to code sign my app, I made it clear to the users saying that my desktop app are not code signed, so people are aware and can trust my app

This might be a small thing to add to a website, but goes a long way in gaining the trust of the users.

Here’s a video demo of the entire app

This was my first Desktop I released to public, there’s still a long way to go and more work to do, but I am so happy I got my first app out in public.

Would love to hear what you guys think :)

Github: https://github.com/PaulleDemon/PyUIBuilder

About: https://about.pyuibuilder.com

Web version: https://pyuibuilder.com

Python GUI full course — Learn GUI development in 15 mins

Paul — Sat, 10 May 2025 09:33:10 +0000

So, you want to start learning GUI development in Python so you can actually start seeing your applications come to life — not just lines of code in a terminal, but real windows, buttons, inputs, and interactions.

Whether you’re building a desktop tool, a dashboard, or just exploring for fun, GUI development opens up a world of visual, interactive programming.

In this guide, I’ll teach you everything you need to know to build Python GUI, in addition, I’ll be introducing you to a tool called PyUibuilder that would make 10x easier for you to build python GUIs

Choosing a GUI library

There are quite a number of GUI libraries out there, some of the common once among them includes, Tkinter, Kivy, PySide.

If you are just getting started with python GUI development its highly recommended you start with Tkinter as its much more beginner friendly.

In this tutorial, we’ll be using Tkinter to explain the GUI development process.

Everything about widgets in python GUI

In GUI (Graphical User Interface) development, widgets are the building blocks of your application’s user interface. A widget can be anything that the user sees or interacts with on the screen — like:

Buttons
Labels
Text inputs
Checkboxes
Dropdowns
Sliders and more.

Think of them like LEGO bricks. You put them together to build a functional interfaces.

Layout’s in python GUI

In GUI development, layouts control where and how your widgets appear on the screen. In Python’s most popular GUI toolkit, Tkinter, layouts are handled using geometry managers — special methods that place and organize widgets inside windows.

In Tkinter there are 3 layout managers:

pack() — Stacks widgets vertically or horizontally
grid() — Arranges widgets in a table-like grid (rows/columns)
place() — Places widgets at exact x, y coordinates (manual layout) If you want your app to be responsive, (adjust widget sizes according to window size), you’ll either go with pack or grid.

Root Widget in Tkinter

If you’re starting to learn how to make apps with Tkinter, the most popular GUI (Graphical User Interface) library in Python, you’ll always come across two things:

root = Tk()
root.mainloop()

But what do these actually mean? Let’s break it down in plain English.

When you make a GUI app, you need a window to hold all the buttons, text boxes, and labels. That’s what the root window is.

In Tkinter, you create this main window by writing:

from tkinter import *

root = Tk()
root.mainloop()

There can only be one root window, if you want more window’s you’ll be using something called Toplevel we’ll come to this at a later time.

Mainloop in tkinter

mainloop() — also known as the event loop — is the part of a Tkinter program that keeps the app running.

Once you’ve set up your window and added all your widgets (like buttons, labels, etc.), you call mainloop() at the end of your script:

root.mainloop()

This tells Python to keep the window open and to listen for user actions — like clicking a button, typing in a box, or closing the window. Without mainloop(), your window would appear and close immediately.

Essentialy its an infinite while loop, with something like this under the hood.

window_open = True

while window_open:
  event_queue()
  render_window()

In short, mainloop() is what makes your GUI app interactive and alive.

Now that you understood the basics of Tkinter, we’ll go into more detail in the next chapter

Getting started with tkinter

Let’s start with a small app. And as said before you’ll need a root window and main loop

import tkinter as tk

root = tk.Tk()
root.mainloop()

Now write the rest of the code between these two lines. Anything after Mainloop will not be visible on the screen.

Let start by adding labels using place.

To add a label we’ll call the Label class that takes the parent as the parameter, in our case the parent is the root. The parents can be anything such as Frames, Tk(), Toplevel() etc, on which your items should be placed.

import tkinter as tk

root = tk.Tk()

# Create a label with text
label = tk.Label(root, text="Hello, Tkinter!")
label.place(x=20, y=20)

root.mainloop()

Now this will place the label at 20, 20 position relative to the root window from the top left corner.

Understanding Pack Layout manager in tkinter

The pack() method arranges widgets relative to each other in the parent window. It places widgets in a block-like fashion — either top-to-bottom (default) or side-by-side, depending on the options you provide.

Lets see an example

root = tk.Tk()

label1 = tk.Label(root, text="Top Label", bg="lightblue")
label1.pack()

label2 = tk.Label(root, text="Bottom Label", bg="lightgreen")
label2.pack()

root.mainloop()

In this example, label1 appears on top of label2. This is the default behavior — vertical stacking from the top.

Key Options

side – Controls the side to pack against: TOP (default), BOTTOM, LEFT, or RIGHT.
fill – Determines how the widget expands: X, Y, or BOTH.
expand – When True, lets the widget expand to fill extra space.
padx and pady – Adds horizontal and vertical padding around the widget.

Using Pack layout with PyUiBuilder

Step 1: Click on the main window and change the layout to Flex as shown below

Step 2: Add two labels from the left widgets tab

Step 3: Click on the label and open the Pack Manager and explore the options.

Yep that’s it! its just as simple as clicking few buttons.

Understanding Grid Layout manager in Tkinter

When your GUI layout needs more structure, especially in rows and columns, Tkinter’s grid layout manager is your best friend. Unlike the simpler pack() method, grid() gives you precise control over widget placement.

What is the Grid Manager?

The grid() method arranges widgets in a table-like structure using rows and columns. You specify where each widget should go using the row and column options.

import tkinter as tk

root = tk.Tk()

tk.Label(root, text="Username:").grid(row=0, column=0)
tk.Entry(root).grid(row=0, column=1)

tk.Label(root, text="Password:").grid(row=1, column=0)
tk.Entry(root, show="*").grid(row=1, column=1)

tk.Button(root, text="Login").grid(row=2, column=0, columnspan=2)

root.mainloop()

When to Use Grid
Ideal for form layouts, data entry screens, and any structured design.

Allows fine-tuned positioning and spacing.
Cannot be mixed with pack() in the same parent widget.

Using Grid layout with PyUiBuilder

Step 1: Click on the main window and change the layout to Grid as shown below.

Step 2: Decide on the number of rows and columns from the grid configure

Step 3: Add label and entry widget by dragging and dropping

Step 4: Adjust rows and column by clicking on the widget and adjusting from grid manager

Oh! and don’t forget to export your code from top right corner.

That was it, now you can try out other widgets on PyUiBuilder and familiarize yourself with Tkinter.

Join discord server, for help with tkinter or python GUI development

Here's how to build a Canva like UI using Reactjs

Paul — Tue, 22 Apr 2025 08:30:00 +0000

Chances are, you’ve used Canva — maybe to whip up a poster, design an Instagram story, or create something that just looks good without breaking being a professional designer.

But have you ever paused and thought: How did they build something like this?

A design tool that runs in the browser, feels effortless to use, and somehow makes everyone feel like a designer?

This is a long read, so make sure to bookmark

While I can't really talk on how Canva was built, because I am not an engineer at Canva. But, inspired by Canva I have built something similar though for a very different use case.

I am going to be talking about PyUiBuilder, a convenient drag and drop tool like Canva I am working on to help Python developers develop Python GUI's easily.

Before we start, feel free to check out the source code for PyUIBuilder, and make sure to star ⭐️ it so you can come back to it at a later point.

note, by the end of this blog you may have a high level overview of the thinking process and how things work, this is in no way a course on how to build Canva.

Planning ahead

So, before you start to write you first line of code. It's always better to plan things such as how your UI's supposed to look, what library/framework you plan to use, what features you would want to have and make a rough sketch in your mind on how different components/elements are supposed to come together.

It's generally recommended to go with the framework/library you are comfortable with. Which, in my case it was Reactjs. Though I used JS for this project, for a big project like this one, I would highly recommend you start with TypeScript.

Project's like this will have a lot of nested data structures and it would be so much easier to maintain and debug if you start with TS instead of JS. I believe I could have avoided many hours of headache if I had just started the entire project with TS.

Structuring your project

Once you have chosen you library/framework, it's time to build the basic structure of the project. Structuring your project is a no brainer. Group things that go together and give each folder meaningful names.

Yep, that's how I do it, if it's a commonly used functions such as a sum function or a math related functions, create a folder called utilities and create file for each related functions and add them in respectively.

For example images goes inside, assets/images, now you can make this path more detailed as well like assets/images/home/, depending on your needs.

Now if these images are related to a component that has a lot is depended on other related smaller component, you could just move these assets inside the components folder and keep main assets in the root directory

Here's a small part of how I have structured mine

.
|--- contexts
|   |--- fileUploadContext.js
|   |--- resizeContext.js
|--- constants
|   |--- frameworks.js
|--- index.js
|--- sidebar
|   |--- sidebar.js
|   |--- widgetsContainer.js
|   |--- utils
|   |   |--- premium.js
|   |   |--- share.js
|   |--- templatesContainer.js
|   |--- uploadsContainer.js
|   |--- pluginsContainer.js
|   |--- treeviewContainer.js
|--- dnd
|--- utils
|   |--- hooks.js
|   |--- common.js
|   |--- errors.js
|   |--- filter.js
|--- assets
|   |--- images
|   |   |--- doggy.png
|   |--- logo
|   |   |--- ko-fi.png
|   |   |--- bmc.svg
|   |   |--- logo.svg
|   |--- widgets
|   |   |--- button.png
|   |--- background
|   |   |--- dots.svg
|--- frameworks
|   |--- customtk
|   |   |--- constants
|   |   |   |--- fontFamily.js
|   |   |   |--- cursor.js

|   |--- utils
|   |   |--- pythonFilePath.js
|   |--- tkinter
|   |   |--- constants
|   |   |   |--- fontFamily.js
|   |   |   |--- cursor.js
|   |   |   |--- styling.js
|   |   |--- pythonWidgets
|   |   |   |--- imageLabel.py
|   |   |   |--- readme.md
|   |   |--- plugins
|   |   |   |   |--- entry.py
|   |   |   |--- code.js
.
.
.

Understanding PyUIBuilder

Before we begin, it's important for you to understand a bit more about PYUiBuilder and the requirements/features.

PyUiBuilder is a Drag and drop GUI builder for python and it can output clean Python Code

let's start with the requirements/features:

The users must be able to drag and drop widgets to canvas.
The canvas should be zoomable and pannable
The widgets can contain child widgets inside them.
The code must be extendable and reusable

Functional component vs Class based component for large apps

Now if you have read the React docs, you would know that Class based components are no longer recommended in favour of Function based components.

So, your natural choice might be to go with function components. However, something that function components lack is the inheritance and extensibility that class-based components provide. The abstraction layers you can create with class-based components are often harder to replicate with function components alone. Also, as function components grow larger, especially with lots of hooks, they can become messy and harder to manage.

That's why I chose to use class-based components for parts of my app that required extensibility, and stuck with function components for everything else.

Creating the Canvas for PyUiBuilder

The main part of Canva or PyUIBuilder is of course the canvas. Thats where all the drag and drop elements go.

Now you might be tempted to use the regular Canvas element provided in the html. But a major problem with using that canvas is that it's hard to debug when you add elements inside it.

So, a better approach would be to treat a div as Canvas and use it.

here's an example code (use +/- keys to zoom in and out)

This is similar approach used by both Canva and PyUiBUilder (you can check this by opening the developer's tool)

Data structure and single source of truth

One of the major parts of building a PyUibuilder like app is the datastructure, especially deciding on how you are going to create a nested structure.

It can become easy to lose track of all the variables and changes. So, I can't have multiple variables keeping track of the same piece of information. So, it's better to avoid passing it as a props down the components or prop drilling

So I'd use React context or state management library like redux

I chose to have all the information about the widgets in a react context after experimenting different approaches.

The data structure looks something like this

[
  {
    id: "", // id of the widget
    widgetType: WidgetClass,  // base widget
    children: [], // children will also have the same datastructure as the parent
    parent: "", // id of the parent of the current widget
    initialData: {} // information about the widget's data that's about to be rendered eg: backgroundColor, foregroundColor etc.
  }
]

It's based on this data structure the components are rendered

Building the drag and drop

When starting out I had researched on a couple of libraries such as React-beautiful-Dnd, React Dnd-kit and React Swappy.

After researching I saw that react-beautiful-dnd was no longer maintained and started with React dnd-kit. As a started building, I found the dnd-kit's documentation quite limited for what I was building, Plus, a new release with major changes to library was coming out soon, so I decided to drop react-dnd-kit until the major release.

I rewrote the parts of where I used DND-kit with HTML's Drag and Drop API. Only limitation with the native Drag and drop API was that it's still not supported by some touch devices, which didn't matter to me because I was building for non-touch devices.

React Context managers

My app allowed asset upload, now these assets where to be used by the widgets/elements in the canvas. So how would you pass the assets to the widgets?

Now I wanted the assets uploaded in the sidebar accessible by toolbar of the widgets. But every time I switch the sidetabs, the re-render caused the uploaded assets to disappear.

Now you might think of using Redux, but One of the biggest limitations with Redux is that you can only store serializable data. Non-serializable data such as image, video, other assets cannot be stored on redux. This would make it harder to pass data around different component.

One way to overcome this is to use React Context. In brief, React Context provides a way to pass data through the component tree without having to pass props down manually at every level.

All I would have to do to have the data in different components was to wrap it around a React context provider.

I Created my own context providers for couple of things:

Drag and drop - Enabling dragging and dropping from sidebar + dragging and dropping withing child elements.
File upload - To make the uploaded files accessible on the toolbar for each widget.
Storing widgets - To make it accessible to both Tree view and the canvas

Here is a simple example of how I used React context for Drag and drop.

import React, { createContext, useContext, useState } from 'react'

const DragWidgetContext = createContext()

export const useDragWidgetContext = () => useContext(DragWidgetContext)

// Provider component to wrap around parts that need drag-and-drop functionality
export const DragWidgetProvider = ({ children }) => {
    const [draggedElement, setDraggedElement] = useState(null)

    const onDragStart = (element) => {
        setDraggedElement(element)
    }

    const onDragEnd = () => {
        setDraggedElement(null)
    }

    return (
        <DragWidgetContext.Provider value={{ draggedElement, onDragStart, onDragEnd }}>
            {children}
        </DragWidgetContext.Provider>
    )
}

Yes! that's it. All I had to do now was to wrap it around the component where I needed the context, which in my case was over Canvas and sidebar.

Final notes

Thank you for reading the entire thing. Hope you have learnt a thing or two on how to build a complex app like Canva/PyUiBuilder.

If you want to study the source code you can do so here.

Github repo ⭐️

10 Useful Tools and Libraries for Python Developers

Paul — Sat, 29 Mar 2025 09:54:29 +0000

Python is an incredibly versatile language, and the right tools can make coding easier, faster, and more enjoyable. Whether you're building websites, working with AI, or automating tasks, these libraries can help you get things done more efficiently. Here are 10 essential tools every Python developer should know about.

1. PyUIBuilder - A GUI Builder for Python

If you’re building desktop applications, PyUIBuilder is a lifesaver. Instead of writing tedious UI code by hand, PyUIBuilder gives you a drag-and-drop interface for designing GUI applications. It outputs clean python code so you can edit later on. Currently it supports tkinter and customtk

2. Poetry - Dependency Management

Tired of dealing with dependency conflicts? Poetry makes package management and virtual environments a breeze. It handles everything from installing dependencies to publishing your package, all with a clean and simple workflow using the pyproject.toml file.

3. FastAPI - Web framework for building APIS

If you need to build APIs fast, FastAPI is the way to go. It’s lightweight, async-friendly, and handles validation automatically. Plus, it generates documentation for you, making development smoother.

4. PyTorch - A Deep Learning Powerhouse

If you're getting into AI, PyTorch is a powerful and easy-to-use deep learning framework. Its flexible computation graph and GPU acceleration make it great for both research and production. Whether you're building neural networks or fine-tuning models, PyTorch makes the process smoother.

5. Pytest - Simple Yet Powerful Testing

Testing doesn’t have to be painful. Pytest makes writing tests easy with fixtures, parameterized testing, and powerful assertion debugging. Just write your test functions, and Pytest will handle the rest—no complex setup required.

6. SQLAlchemy - Database Interaction using ORM

If raw SQL queries aren’t your thing, SQLAlchemy provides a cleaner, more Pythonic way to work with databases. Its ORM (Object-Relational Mapper) allows you to interact with databases using Python classes instead of SQL, making database management much more intuitive.

7. Scikit-learn - Machine Learning

Scikit-learn is the go-to library for classical machine learning. Need to build a classifier, a regression model, or perform clustering? Scikit-learn has all the essential algorithms packed into a simple, easy-to-use interface.

8. Jupyter Notebook - Interactive Coding Playground

For data scientists and researchers, Jupyter Notebook is an essential tool. It lets you write and run Python code interactively, visualize data, and document workflows—all in one place. Perfect for experimentation and collaboration.

9. Celery - Handle and run background tasks

Need to run time-consuming tasks in the background? Celery helps you offload tasks like sending emails, processing large data sets, or handling scheduled jobs asynchronously. It’s widely used in web applications to improve performance and responsiveness.

10. Hugging Face Transformers - pretrained models for inference and training

Want to use AI models without reinventing the wheel? Hugging Face Transformers provides pre-trained models for NLP, vision, and more. Whether you need a chatbot, text summarization, or sentiment analysis, this library makes AI integration effortless.

Since you have read till here, here's two more as a bonus

11. Rich - Beautiful CLI Output Made Easy

Rich is a Python library that makes command-line applications more visually appealing. It supports colorful text, tables, syntax highlighting, progress bars, and improved logging—perfect for making your CLI tools more user-friendly. With just a few lines of code, you can transform plain terminal output into something much more engaging.

12. Pydantic - Data Validation Without the Headache

Dealing with messy data? Pydantic makes it easy to validate and parse structured data using Python type hints. It’s especially useful when working with APIs, ensuring that your data is always clean and well-structured.

Wrapping Up

The right tools can speed up your Python development experience. Whether you’re streamlining dependency management with Poetry, diving into machine learning with PyTorch, or automating workflows with Invoke, these tools will save you time and effort.

Create Tkinter GUI’s using Tkinter GUI Builder — PyUiBuilder

Paul — Thu, 27 Mar 2025 10:01:54 +0000

If your starting out with tkinter, it can be overwhelming without prior understanding of GUIs. Whether you are trying to make a simple school project or are trying to create an internal application for your company, Tkinter GUI Builder will make this entire process easier.

PyUiBuilder — An Introduction

PyUiBuilder is a framework agnostic GUI builder tool. Meaning you can use the same GUI builder tool to make GUI’s in tkinter, customtk and others. The best part is that it can generate editable Python code.

Basics of GUI

Before we jump right into the GUI builder it is vital for you to understand some basics of GUI, especially if you have never created a GUI before.

Widgets — widgets are individual components such as labels, buttons, frames etc, that help you build your interface.

Layouts — Layouts define how widgets are arranged within a window or container. They help structure your interface by positioning widgets in a logical and visually appealing way. In Tkinter, you can manage layouts using different geometry managers like:

pack() — Stacks widgets vertically or horizontally. Watch this video to understand how tkinter pack geometry works
grid() — Arranges widgets in a table-like structure using rows and columns.
place() — Positions widgets at exact coordinates. Choosing the right layout method ensures your interface adapts well to different window sizes and screen resolutions.

Here's a video to follow along

Building with PyUiBuilder

Lets start by trying to replicate the Signup form you see above.

step 1: From the sidebar open the widgets tab and drag and drop a frame into the main window.

step 2: By default all the widgets use place layout, meaning they will be added where you drop them, but this won’t be responsive, so we’ll change the flex/pack, by clicking on the main window and from the righ toolbar layout dropdown

step 3: While this is great, the frame is not at the top, but we need to center it. To center it click back on the frame and from the toolbar go down to Pack Manager and click on expand and set anchor to center.

step 4: Now lets set the frame layout (from layouts dropdown) to be flex and add a label widget.

step 5: Now select the label widget and change the label to signup. We can also center this text by going under the styling accordion and changing Text align to center

step 6: Lets change the background color of the base Frame so there is much more contrast.

step 7: Now let us add another frame inside that base frame and set its layout to Grid.

step 8: Let’s give it a margin in the y direction so there’s a space between Frame and Signup label.

step 9: Let’s no configure the Frame’s grid to be 2 rows and 2 cols.

step 10: Add a 2 labels and 2 Entry widget in the order label -> Entry -> Label -> Entry and you’ll have the following.

step 11: To finish it off add a button in the main Frame and vola you have a sign up form. Now all you have to do is click on Export code button on top right corner and execute the code and you’ll have something like below.

(Note: tkinter is OS dependent, so if you are on Mac, or windows you’ll see something a bit more different than if you are on a Linux.)

That’s all for now. More tutorial on PyUiBuilder will soon be added. Until then feel free to experiment and try building the UIs

If you have questions or need help her’s an invite to join the Discord server for PyUiBuilder

My Python GUI Builder just crossed 300 stars on GitHub 🤯

Paul — Wed, 12 Mar 2025 12:00:02 +0000

PyUIBuilder is a Python a cross-framework GUI builder I am working on and it just crossed 300 stars mark, making this my second most stared Github repository

If you have ever had to work with Python you would have atleast once had to make a GUI using tkinter/kivy/PySide.

Now, building a GUI as a python developers can be very challenging, from understanding main loop, event loops, handling events to knowing what's available to you in each library/framework.

So, I took on this challenging project to make it easier for you to develop cross-framework GUIs in Python.

Here's a demo

Try PyUiBuilder → Star PyUiBuilder ⭐️

What is Python GUI Builder?

A python GUI builder or PyUIBuilder is web based a Graphical User interface (GUI) builder for Python

So, what does Cross framework mean here?

Cross framework here means you would be able to select between different frameworks and build your GUIs in a simple interface. You would be able to choose between tkinter and CustomTk for now. PySide and Kivy frameworks are work in progress.

What are some exciting features of Python GUI Builder?

While there are many exciting features I am working on, here's to list a few

Cross-framework support, currently supports Tkinter and CustomTk, and will soon support Kivy and PySide.
Support for 3rd party widgets such as tkvideoplayer, mapview etc.
Intuitive interface
Web based, no need to download anything, just type in the webadress and start building
Tree view to easily view every widget on canvas at one place.

What are some upcoming features?

We'll there are many in fact. Right now, here's the priority.

Support event handlers
An inbuilt code editor to edit event handler code.
Support for more widget.
Add support for more 3rd party widgets.

You can go through the roadmap to know more.

What's were the challenges?

Well there were a lot, among the hardest part was building the entire architecture, a lot of thinking went into building the data structure that would hold the elements, the other thing that I had struggled was finding good a drag and drop library.

I had tried and experimented quite a number of library including dnd-kit, but most failed in my use case, so I had to write the dnd from scratch.

Most of my challenges were creating the initial structure and base that can be scaled as per needs.

Now that most of the hard part is complete, I'll be focusing more on bug fixes and work on the features on the roadmap.

If you want more insights, you can read my previous blog on how I started this

If you liked the project and want to support its ongoing development, make sure to star the repo :)

Star PyUiBuilder ⭐️

10 Awesome CSS text effects for your next project

Paul — Mon, 17 Feb 2025 10:13:46 +0000

Text is everywhere on the web, but that doesn’t mean it has to be boring. With just a little CSS, you can turn plain words into eye-catching elements that grab attention and make your design feel more alive and awesome.

In this post, I’ll share 10 awesome CSS text effects for making your project stand out.

You can view all the effects here

1.The Aurora

The Aurora effect by Ostylowany creates a beautiful, glowing aurora-like gradient that flows across the text, giving it a dreamy and futuristic look. This effect is perfect for adding a soft, ethereal glow to headings, banners, or any text that needs a visually striking appearance.

2. Split transition

The split transition effect by ParkHJ11, creates a sleek hover animation where the outer text splits apart, revealing a hidden inner text beneath.

(hover on text)

3. Outline offset

The outline offset effect adds a visually distinct outline around the text, creating a layered or floating appearance. By adjusting the offset distance, you can achieve a subtle shadow-like effect or a bold, separated outline that enhances readability and style. This effect works great for titles, hover interactions, and highlighting key content.

4. Dancing shadow

This dancing shadow effect by Emadamerho Nefe, creates a lively animation where the text's shadow shifts dynamically in opposite diagonal directions. The shadows smoothly alternate between two colors, expanding and contracting to give the illusion of movement

5. Folded Text

The folded text effect by Mandy Michael makes your text look like it’s been carefully creased and folded, almost like paper. With clever shading and gradients, each letter gets a cool 3D look, adding depth and texture. It’s a great way to make headlines stand out or give your design a unique, hands-on feel.

6. Reflect

The Reflect by Chokcoco creates a sleek mirror-like reflection beneath the text, giving it a polished and futuristic look. The reflection subtly fades out, mimicking the way light interacts with a glossy surface. This effect is perfect for adding a modern, high-tech feel to titles, logos, or banners.

7. Spring

Spring effect by Piccalilli, make the letters pop out like a spring on hover, creating a fun and bouncy animation. The effect gives text a lively, interactive feel, making it great for playful headlines, buttons, or any design element that needs a bit of extra energy and movement.

(hover text)

8. Sliced

The Sliced text effect by Shireen Taj makes it look like a ninja has swiftly sliced through the text, splitting it into two sharp-edged parts. The pieces subtly shift apart, adding a dramatic and dynamic feel, as if the cut just happened.

9. Hey

The Hey text effect by Radu Bratan features a bold, animated shadow that continuously shifts, creating a dynamic popping effect. The shadow cycles through different positions, making the text appear as if it’s constantly bouncing or floating.

10. Fracture

The Fracture text effect by Mandy Michael gives the illusion that the text has been cleanly sliced through the middle, with the upper half smoothly sliding to the left in a continuous loop.

Those were some of cool effect's you can try in your next project to make your project stand out.

If you liked this, you can check the curated collection of text effects here

Text effects ⭐️

Top 10 Essential chrome extensions for web design and development

Paul — Sat, 01 Feb 2025 12:24:42 +0000

Let’s face it, not all of us are born designers. But the good news is, you don’t need to be a design prodigy to create something amazing. With the right tools, even the most design-challenged among us can produce eye-catching visuals.

So, here’s a curated list of Chrome extensions to help you improve your website design. Make sure to bookmark it!

CSS Peeper

CSS Inspector

If you’ve ever wanted to quickly get all the metadata about a webpage, such as the fonts being used, the color palette, or even the spacing between elements, CSS Peeper is the perfect Chrome extension for you. It simplifies the process of inspecting a website’s design elements without diving into the code.

Get CSS Peeper

What Font

Font finder

Ever wonder what fonts are used on a website? WhatFont makes it easy — just hover over text to see the font name and details like size, weight, and style. It even identifies web fonts like Google Fonts.

Get What Font

Font Tester

Font testing tool

Now it goes without a saying that texts make’s up 80% of the website and typography key role in shaping your design. If you ever want to present your customers with impactful website, try using the Font Tester tool to find which font works best for the project.

Font Tester is a handy tool and comes with font identifier, custom font testing, 1000+ google fonts, live font comparison and can also generate the CSS code for the selected font. Plus, parts of Font tester are open-sourced.

Get Font Tester

Screen ruler

Layout measurement

Trying to measure something on your screen? Screen Ruler makes it easy. Drag it across your screen to check dimensions, spacing, or alignment in just a few clicks. It’s quick, simple, and super handy for designers and developers!

Get Screen ruler

Mobile Simulator

Responsive checker

This extension is must have for web developers who need to test their website’s responsiveness across various devices. They offer a wide range of Android and iPhone device frames, it allows you to preview your site exactly as it would appear on different screens.

In addition to that you can take screenshots of the website along with the device frame in case you need to display the demo of your product

Get Mobile simulator

Color Zilla

Color picker

Ever see a color online and wish you could grab it? ColorZilla makes it easy. Use the eyedropper to pick any color on your screen, copy its HEX or RGB code, and even check gradients. It’s a must-have for designers and anyone who loves playing with colors!

Get Color zilla

Page Ruler

Layout measurement

Page Ruler is a handy extension for measuring pixel distances on a webpage. It creates a rectangular ruler as you move your mouse, displaying the width, height, start, and end points, all labeled in pixels. The rectangle resizes dynamically as you move, with all measurements updating in real time.

Get Page ruler

Perfect Pixel

Design Overlay

PerfectPixel helps designers achieve pixel-perfect accuracy by overlaying a semi-transparent image on a webpage. You can compare your design mockup with the live site, adjust opacity, and ensure every detail aligns perfectly. It’s a must-have for pixel perfectionists!

Get Perfect pixel

Color Contrast Checker

Color Contrast Checker helps you ensure your text is readable by checking the contrast between foreground and background colors. It provides instant feedback on whether the color combination meets accessibility standards, making it essential for designers focused on inclusive design.

Get Color contrast checker

Muzli

Design inspiration

Muzli curates design inspiration from around the web, offering fresh ideas for UI, UX, and visual design. It’s perfect for kickstarting your creativity.

Get Muzli

Those were top 10 chrome extensions for designers and frontend developers. Did I miss something? feel free to comment it :)

Previewing and comparing fonts side-by-side directly on your website?

Paul — Thu, 02 Jan 2025 14:51:23 +0000

Hey all,

Happy new year!

If you have been following me, you'd know that I have been working on a typography extension that allows you to preview your fonts live for sometime now.

Considering 80% of the website is just text, how you present your texts matters quite a lot.

Recently I decided to add and test a new feature called "multi-font compare" that allows you to see your website in multiple different fonts and compare them side by side, allowing you to copy the code for the one you like easily.

here's a demo on youtube (start at 0:19):

You can try it out yourself here (PS: use desktop version to view this pls)

The link to extension

let me know what you guys think of this new feature :)

Hmmm. Just checking out the Twitter for devs

Paul — Wed, 13 Nov 2024 09:23:35 +0000

15 Essential tools and resources for Frontend developers ⚡️

Paul — Thu, 07 Nov 2024 09:11:31 +0000

So, you want to boost your productivity as a frontend developer.

Whether you're looking for learning resources, productivity boosters, or curated directories, these picks are here to help you work smarter and level up your frontend skills. So, don't forget to save this list and share it with others who might find it helpful :)

So, let's begin

1. PureRef

The inspiration management board

PureRef is a reference management tool that lets you gather and organize all your visual inspiration in one place. With an infinite canvas, you can drag and drop images directly from the web or your files, arranging them freely to create a personal mood board or design reference.

It's a must have for both designer's and developers. Its available for Mac, Linux and Windows

⭐️ Get Pure Ref

2. GSAP

Popular web Animation library

GSAP is a popular JavaScript library that makes it easy to create smooth, high-performance animations on the web. It has a very intuitive API for developers, you can make use of this library to create simple to very complex animations easily.

⭐️ Get GSAP

3. Font Tester

Typography extension for webdevelopers

Font Tester is a powerful chrome extension that help you pick fonts for your website. It can help you test and preview 1000+ fonts on any website, helping you create a powerful perception about your brand via better typography.

So, if you suck at picking good fonts for your website, make sure to check this out.

⭐️ Get Font Tester

4. SVG Repo

Place to find SVG Vector and icons

SVG repo is a popular free site for finding and using SVG vectors, they have a collection of over 500,000 icons and vectors for you to choose from. All the icons are available for free for both personal and commercial projects.

⭐️ Visit SVG Repo

5. Color Hunt

Curated color palette

Color Hunt provides a curated collection of color palettes, ideal for web designers seeking fresh color combinations. Each palette is carefully crafted and community-approved, helping you find color schemes that fit your aesthetic without the guesswork.

⭐️ Visit Color Hunt

6. CSS Gradient

Gradient generator

CSS Gradient is a simple yet powerful website for creating custom gradients with CSS. It offers an intuitive interface for selecting colors, setting angles, and adjusting stops, then generates the CSS code, ready to integrate into your project.

⭐️ Visit CSS Gradients

7. Awwwards

Inspiration and top-rated designs

Awwwards is a website showcase platform for top-rated websites, highlighting excellence in design, creativity, and usability. It’s an excellent resource for web developers and designers to explore new trends, find inspiration and see how the best websites are crafted.

⭐️ Visit Awwwards

8. LandBook

Inspiration and top-rated designs

LandBook is a curated gallery of beautiful, effective landing pages. It's a great source of inspiration for developers and designers, showcasing real-world examples of landing page design across different industries.

⭐️ Visit Landbook

9. Screenity

Screen recording and product recording

Screenity is a powerful screen recording Chrome extension, offering features like annotating during recording, capturing camera and microphone input, and exporting recordings in different formats. It’s perfect for creating tutorials, bug reports, or walkthroughs, making it a great productivity tool for developers, educators, and remote teams.

⭐️ Get Screenity

10. HTML REV

Learning resource and templates

HTML Rev is an extensive collection of over 1,500 free templates, including HTML, Bootstrap, Tailwind, React, Vue, Laravel, and more. It serves as both a valuable learning resource and a library of ready-made templates, so you don’t have to start from scratch every time.

⭐️ Visit HTML Rev

11. Excalidraw

Brainstorming

Excalidraw is an open-source, online whiteboard for sketching diagrams and layouts. Its hand-drawn style and intuitive tools make it perfect for brainstorming, flowcharting, or quickly mapping out ideas for web projects.

⭐️ Visit Excalidraw

12. Codepen

Online editor

CodePen is an online code editor for HTML, CSS, and JavaScript, allowing developers to create, share, and explore front-end projects. It offers real-time previews and a strong community for feedback and inspiration. Ideal for prototyping and learning.

⭐️ Visit CodePen

13. BrowserStack

Cross browser testing tool

BrowserStack is a popular browser testing tool, it provides cross-browser testing on real devices, helping developers test website compatibility across various browsers and operating systems without the need for a physical lab. It’s a go-to for ensuring consistent user experience.

⭐️ Visit BrowserStack

14. CSS-Tricks

Learning resource

CSS-Tricks is a blog and reference site filled with tutorials, articles, and snippets on CSS and front-end development. It’s a valuable resource for staying up-to-date with new techniques and finding quick solutions for CSS challenges.

⭐️ Visit CSS-Tricks

15. Smashing Magazine

Learning resource and blog

Smashing Magazine is a popular online publication for web designers and developers, offering articles, tutorials, and resources on design, development, and UX. It’s known for high-quality, in-depth content that appeals to industry professionals.

⭐️ Visit Smashing Magazine

So, those where some 15 most useful tools and resources I have used as a developer. Go ahead and comment your favourite.

Change the way you design. Learn Typography

Paul — Wed, 06 Nov 2024 12:49:28 +0000

If you want to change the way your website and brand is perceived, it's not too hard.

A website isn't just about colors and color pallets, it's also how you present the information to your visitors, Typefaces and fonts can change the way your brand is perceived. It can tell a lot about you and your brand. However, with an overwhelming variety of typefaces available, it’s easy to feel lost.

By the end of the blog, you’ll learn the difference between Typography, Typeface, Fonts and learn when to use which fonts.

Plus, if you stay till the end, I’ll share a secret tool that can simplify selecting your web fonts.

So, make sure to bookmark it and like it so it can reach others :)

So, what is Typography?

Typography is simply arranging text in a visually effective way, which includes selecting fonts but also involves adjusting spacing, alignment, hierarchy, and other elements to enhance readability and aesthetics.

Typography Vs Typefaces Vs Fonts, what’s the difference?

First thing to keep in mind is that Typography is not Fonts.

Typography is a broader art encompassing typefaces and fonts, focusing on elements like line spacing, letter spacing, alignment, and layout to create visually appealing and readable text.

Typeface: Typeface is the overall design or the style of the character, for example, Times New Roman is a Typeface, Helvetica is a different Typeface

Fonts: Fonts are a subset of fonts, e.g. Times New Roman, Bold, 12px is a typeface

Typefaces

Typefaces are broadly classified into two categories, Serif and Sans-Serif (aka without serif). Serif fonts have something called foot or lines as shown in the below image.

Quick Exercise

Now that you have learnt the difference, take a moment and tell us which typeface the Dev.to logo is using. Is it Serif or Sans-Serif? let me know in the comments.

Everything about Serif

This section we’ll see when to use serif fonts and brands using the serif fonts

So, when should I use Serif fonts?

Serif fonts are ideal for print media, Headings, Luxury items.

✨ Brands using Serif

Here are some popular brands using Serif fonts in their logo.

Everything about Sans-Serif

Now let’s talk about Sans-serif, also referred as without Serif.

When should I use Sans-Serif?

Sans-serif are said to be more readable in digital devices such as computers, smart phones and more. So, if you want something more minimalistic, modern go with Sans-serif fonts.

✨ Brands using Sans-Serif

You’ll see Sans-serif more popular among Tech companies. It’s used to give a modern and minimalistic perception.

Some popular brands using Sans-serif logo include Apple, Spotify.

Here's a fun fact

Popular Tech companies such as Google, Spotify and Yahoo changed their logo from Serif to Sans-Serif

Google logo using serif and then switching to sans-serif

Same in the case of Yahoo

The secret Extension

So, now that you have read till here, you have obviously understood the importance of Typefaces and Fonts and the impact it can have on your brand.

You definitely want a tool that can make it easier for you to pick and test fonts on any website.

So let me introduce you to Font Tester, a very powerful chrome extension that can help you test, preview and find fonts on any webpage. It comes with 1000+ pre-installed Google fonts, plus, you can upload and test your local fonts and copy the code for the fonts directly from the modal.

Get Font Tester 🔥

Thank you for reading. If you liked it make sure to share it. Oh! and don’t forget to tell us about your favourite font in the comments.