Visual, behavioural and conceptual terms for describing what you want when building for the web. This page self-destructs when the timer hits zero.
1ContainerA box that holds other elements inside it.
2WrapperThe outermost box around a group of elements.
3CardA self-contained box with its own background, border and shadow.
4ModalA popup that appears over the page and blocks everything behind it.
5PanelA content area that shows or hides. Your admin tabs each reveal a panel.
6HeaderThe top section of a page or card.
7FooterThe bottom section of a page or card.
8SectionA distinct block of content on a page.
9RowElements sitting side by side horizontally.
10ColumnElements stacked vertically.
11DividerA line that separates two sections.
12MarginSpace outside an element. Pushes it away from neighbours.
13PaddingSpace inside an element. Pushes content away from its own edges.
14GapSpace between items in a row or column.
15BorderThe line drawn around the edge of an element.
16Border radiusHow rounded the corners are.
17ShadowThe soft glow or drop effect under a card or button.
18BackgroundThe colour sitting behind an element's content.
19OpacityHow see-through something is. Zero is invisible, one is fully solid.
20ButtonA clickable element that triggers an action.
21InputA box the user types into.
22LabelSmall text above an input describing what it's for.
23PlaceholderThe faint hint text inside an empty input.
24DropdownOpens a list of options to choose from.
25ToggleA switch that turns something on or off.
26TabSwitches the visible panel. Orders, Prices, Tracker are tabs.
27BadgeA small label showing a short value or status.
28IconA small visual symbol. The refresh arrows, the WhatsApp logo.
29ToastA small notification that appears briefly then disappears.
30BreadcrumbA navigation hint showing where you are. "Back to Store" is a breadcrumb.
31ScrollMoving through content taller than the screen.
32OverflowWhen content is bigger than its container and causes unwanted scroll.
33FixedStays in the same position even when you scroll. Your WhatsApp bubble.
34HiddenAn element that exists but is not visible.
35VisibleAn element that is shown on the page.
36DisabledA button or input that cannot be interacted with. Usually greyed out.
37ActiveThe currently selected or highlighted state.
38HoverWhat happens visually when your cursor sits over something without clicking.
39FocusWhen an input is selected and ready for typing. Brings up keyboard on mobile.
40TransitionA smooth visual change between two states. Button darkening on hover.
41Loading stateThe visual shown while waiting for data to arrive.
42Empty stateWhat shows when there is no data yet.
43Error stateWhat shows when something went wrong.
44Success stateWhat shows when an action completed successfully.
45WhitespaceEmpty space used intentionally to give a design room to breathe.
46Call to action (CTA)The main button you want the user to press.
47HierarchyThe visual order of importance. Big bold heading first, small grey caption last.
48ContrastThe difference in brightness between two elements. Low contrast is hard to read.
49ConsistencyWhen elements that do the same thing look the same everywhere.
50ResponsiveA design that adjusts itself to look good on any screen size.
51BreakpointThe screen width where the layout switches between mobile and desktop.
52Above the foldContent visible without scrolling. The most important stuff lives here.
53FeedbackA visual response to a user action. Button changing when clicked is feedback.
54RenderWhen the browser draws something onto the screen.
55CacheA saved copy of something stored so it doesn't have to be fetched again.
56TTL (Time To Live)How long a cached item stays valid before it expires.
57SessionA period of activity remembered by the system. Logging out ends the session.
58TokenA secret key that proves you are who you say you are.
59AuthenticationVerifying that someone is who they claim to be. Your admin password does this.
60FlagA true or false value that controls whether something happens. notifiedDelivered is a flag.
61ConditionA rule that must be true for something to happen. "Only notify if source is admin."
62LoopDoing the same action repeatedly for a list of items. Placing orders for multiple numbers.
63TriggerThe event or condition that causes something to start. A button click triggers a function.
64FallbackWhat happens when the main thing fails. "If no queue data, show processing."
65ValidationChecking that input is correct before using it. Confirming phone number is 10 digits.
66SanitiseCleaning up input before using it. Trimming spaces, converting to uppercase.
67APIA connection point between two systems. Your worker talks to Clickyfied through an API.
68EndpointA specific address an API listens to. /track/DGT-NWQ3NG is an endpoint.
69RequestWhat your frontend sends to the backend asking for something.
70ResponseWhat the backend sends back after receiving a request.
71FetchThe action of going to get data from an API.
72PollRepeatedly checking for updates on a timer. Your tracker auto-refreshes every 30 seconds.
73WebhookThe opposite of polling. The other system tells you when something happens.
74Cron jobCode that runs automatically on a schedule. Ours checks delivery status periodically.
75QueueA line of items waiting to be processed. Your orders wait in Clickyfied's queue.
76Queue positionWhere in that line a specific order sits.
77StatusThe current state of something. Processing, Delivered, Failed are statuses.
78LogA recorded history of events. Your tracker tab logs who searched which code.
79DeployPublishing updated code so it goes live.
80Environment variableA private value stored outside the code. Your admin password and Telegram token.
81FrontendEverything the user sees and interacts with in the browser.
82BackendThe server-side code that handles data and logic. Your Cloudflare Worker.
83DatabaseWhere data is stored permanently. Your KV storage acts as a simple database.
84Key-Value (KV)A simple storage system. You store and retrieve data using a name as the key.
85PWAProgressive Web App. A website that can be installed on a phone and behave like an app.
86OG TagsOpen Graph. Hidden info controlling how your link looks when shared on WhatsApp or Facebook.
87Meta tagsHidden instructions in a page that tell browsers and social platforms about the page.
88NotificationA message sent to alert someone of an event. Your Telegram delivery alert.
89PayloadThe actual data inside a request or response. The order details inside an API reply.
90PrefixThe beginning part of a key or code. "DGT-" is the prefix of your order codes.
91DuplicateAn unintended second copy of something. The doubled tracking code paste.
92Auto-correctAutomatically fixing a known mistake without asking the user.
93ThrottleLimiting how often something can happen. Caching the queue position every 2 minutes.
94LazyOnly doing something when it is actually needed, not in advance.
95ProactiveDoing something before it is asked for. The cron job checking delivery without waiting.
96SourceWhere something came from. Admin-placed orders have source "manual".
97PersistKeeping data alive across refreshes or sessions. Storing the last tracked code.
98InlineSitting within the flow of other elements rather than on its own block.
99Dark modeA colour scheme with dark backgrounds and light text. Your admin panel.
100Light modeA colour scheme with light backgrounds and dark text. Your store front.