{"id":4471,"date":"2025-08-09T16:10:32","date_gmt":"2025-08-09T16:10:32","guid":{"rendered":"https:\/\/uplatz.com\/blog\/?p=4471"},"modified":"2025-08-09T16:10:32","modified_gmt":"2025-08-09T16:10:32","slug":"streamlit-pocket-book","status":"publish","type":"post","link":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/","title":{"rendered":"Streamlit Pocket Book"},"content":{"rendered":"<p><!-- Streamlit Pocket Book \u2014 Uplatz (50 Cards, Wide Layout, Readable Code, Scoped Styles) --><\/p>\n<div style=\"margin:16px 0;\">\n<style>\n    .wp-streamlit-pb { font-family: Arial, sans-serif; max-width: 1320px; margin:0 auto; }\n    .wp-streamlit-pb .heading{\n      background: linear-gradient(135deg, #e0f2fe, #f5f3ff); \/* light blue -> light violet *\/\n      color:#0f172a; padding:22px 24px; border-radius:14px;\n      text-align:center; margin-bottom:18px; box-shadow:0 8px 20px rgba(0,0,0,.08);\n      border:1px solid #cbd5e1;\n    }\n    .wp-streamlit-pb .heading h2{ margin:0; font-size:2.1rem; letter-spacing:.2px; }\n    .wp-streamlit-pb .heading p{ margin:6px 0 0; font-size:1.02rem; opacity:.9; }<\/p>\n<p>    \/* Wide, dense grid *\/\n    .wp-streamlit-pb .grid{\n      display:grid; gap:14px;\n      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n    }\n    @media (min-width:1200px){\n      .wp-streamlit-pb .grid{ grid-template-columns: repeat(3, 1fr); }\n    }<\/p>\n<p>    .wp-streamlit-pb .section-title{\n      grid-column:1\/-1; background:#f8fafc; border-left:8px solid #0ea5e9; \/* blue *\/\n      padding:12px 16px; border-radius:10px; font-weight:700; color:#0f172a; font-size:1.08rem;\n      box-shadow:0 2px 8px rgba(0,0,0,.05); border:1px solid #e2e8f0;\n    }\n    .wp-streamlit-pb .card{\n      background:#ffffff; border-left:6px solid #0ea5e9;\n      padding:18px; border-radius:12px;\n      box-shadow:0 6px 14px rgba(0,0,0,.06);\n      transition:transform .12s ease, box-shadow .12s ease;\n      border:1px solid #e5e7eb;\n    }\n    .wp-streamlit-pb .card:hover{ transform: translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.08); }\n    .wp-streamlit-pb .card h3{ margin:0 0 10px; font-size:1.12rem; color:#0f172a; }\n    .wp-streamlit-pb .card p{ margin:0; font-size:.96rem; color:#334155; line-height:1.62; }<\/p>\n<p>    \/* Color helpers *\/\n    .bg-blue { border-left-color:#0ea5e9 !important; background:#eef6ff !important; }\n    .bg-green{ border-left-color:#10b981 !important; background:#f0fdf4 !important; }\n    .bg-amber{ border-left-color:#f59e0b !important; background:#fffbeb !important; }\n    .bg-violet{ border-left-color:#8b5cf6 !important; background:#f5f3ff !important; }\n    .bg-rose{ border-left-color:#ef4444 !important; background:#fff1f2 !important; }\n    .bg-cyan{ border-left-color:#06b6d4 !important; background:#ecfeff !important; }\n    .bg-lime{ border-left-color:#22c55e !important; background:#ecfdf5 !important; }\n    .bg-orange{ border-left-color:#f97316 !important; background:#fff7ed !important; }\n    .bg-indigo{ border-left-color:#6366f1 !important; background:#eef2ff !important; }\n    .bg-emerald{ border-left-color:#059669 !important; background:#ecfdf5 !important; }\n    .bg-slate{ border-left-color:#334155 !important; background:#f8fafc !important; }<\/p>\n<p>    \/* Utilities & code *\/\n    .tight ul{ margin:0; padding-left:18px; }\n    .tight li{ margin:4px 0; }\n    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n    .wp-streamlit-pb code{ background:#f1f5f9; padding:0 4px; border-radius:4px; border:1px solid #e2e8f0; }\n    .wp-streamlit-pb pre{\n      background:#f5f5f5; color:#111827; border:1px solid #e5e7eb;\n      padding:12px; border-radius:8px; overflow:auto; font-size:.92rem; line-height:1.55;\n    }\n    .q{font-weight:700;}\n    .qa p{ margin:8px 0; }\n  <\/style>\n<div class=\"wp-streamlit-pb\">\n<div class=\"heading\">\n<h2>Streamlit Pocket Book \u2014 Uplatz<\/h2>\n<p>50 in-depth cards \u2022 Wide layout \u2022 Readable examples \u2022 20-question interview Q&amp;A included<\/p>\n<\/p><\/div>\n<div class=\"grid\">\n      <!-- ===================== SECTION 1: FOUNDATIONS (1\u201310) ===================== --><\/p>\n<div class=\"section-title\">Section 1 \u2014 Foundations<\/div>\n<div class=\"card bg-blue\">\n<h3>1) What is Streamlit?<\/h3>\n<p>Streamlit is a Python framework that turns scripts into shareable web apps with minimal code\u2014ideal for data apps, dashboards, and ML demos. It handles UI, state, reruns, and layout automatically.<\/p>\n<pre><code class=\"mono\">pip install streamlit\r\nstreamlit hello\r\n# run your app:\r\nstreamlit run app.py<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-green\">\n<h3>2) Minimal App Anatomy<\/h3>\n<p>Streamlit executes top-to-bottom on every interaction. Widgets set state, then the script reruns to reflect changes. Use <code>st.title<\/code>, <code>st.write<\/code>, widgets, and charts.<\/p>\n<pre><code class=\"mono\">import streamlit as st\r\nst.title(\"Hello Streamlit\")\r\nname = st.text_input(\"Your name\")\r\nst.write(\"Hi\", name or \"there!\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-amber\">\n<h3>3) Layout Basics<\/h3>\n<p>Use columns, tabs, and expanders to structure content; sidebar for navigation and global controls.<\/p>\n<pre><code class=\"mono\">col1, col2 = st.columns(2)\r\nwith col1: st.metric(\"Users\", 1200)\r\nwith col2: st.metric(\"Churn\", \"4.8%\", \"-0.3pp\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-violet\">\n<h3>4) State &#038; Reruns<\/h3>\n<p>Widgets store values; for custom state, use <code>st.session_state<\/code>. Changes trigger reruns; guard expensive work with caching.<\/p>\n<pre><code class=\"mono\">if \"count\" not in st.session_state: st.session_state.count = 0\r\nif st.button(\"Add\"): st.session_state.count += 1\r\nst.write(\"Count:\", st.session_state.count)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-rose\">\n<h3>5) Forms for Controlled Submit<\/h3>\n<p>Forms bundle inputs and only trigger a rerun when submitted\u2014useful for multi-field validation.<\/p>\n<pre><code class=\"mono\">with st.form(\"login\"):\r\n  user = st.text_input(\"User\"); pwd = st.text_input(\"Pass\", type=\"password\")\r\n  ok = st.form_submit_button(\"Sign in\")\r\nif ok: st.success(f\"Welcome {user}\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-cyan\">\n<h3>6) Caching (Results &#038; Resources)<\/h3>\n<p><code>@st.cache_data<\/code> caches pure-function outputs by args; <code>@st.cache_resource<\/code> caches heavy objects (DB engines, models). Invalidate with <code>ttl<\/code> or <code>clear_cache<\/code>.<\/p>\n<pre><code class=\"mono\">@st.cache_data(ttl=600)\r\ndef load_df(url): return pd.read_csv(url)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-lime\">\n<h3>7) Display Primitives<\/h3>\n<p>Use <code>st.write<\/code>, <code>st.markdown<\/code>, <code>st.code<\/code>, <code>st.json<\/code>, <code>st.table<\/code>, and <code>st.dataframe<\/code> for rich display. Markdown supports HTML (safe subset).<\/p>\n<pre><code class=\"mono\">st.markdown(\"**Bold** and _italic_\"); st.code(\"print('Hi')\", language=\"python\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-orange\">\n<h3>8) Charts<\/h3>\n<p>Native charts: <code>st.line_chart<\/code>, <code>st.area_chart<\/code>, <code>st.bar_chart<\/code>. Integrates with Altair, Plotly, Matplotlib, PyDeck.<\/p>\n<pre><code class=\"mono\">st.line_chart({\"x\":[1,2,3],\"y\":[3,1,4]})<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-indigo\">\n<h3>9) File Upload\/Download<\/h3>\n<p>Use <code>st.file_uploader<\/code> to accept files; create downloadable assets with <code>st.download_button<\/code>.<\/p>\n<pre><code class=\"mono\">up = st.file_uploader(\"CSV\", type=\"csv\")\r\nif up: st.download_button(\"Echo\", up.getvalue(), \"copy.csv\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-emerald\">\n<h3>10) Q&amp;A \u2014 \u201cWhy Streamlit over Flask + React?\u201d<\/h3>\n<p><span class=\"q\">Answer:<\/span> Streamlit trades custom UI flexibility for speed: data folks ship functional apps fast using only Python, with widgets, state, caching, and hosting handled.<\/p>\n<\/p><\/div>\n<p>      <!-- ===================== SECTION 2: WIDGETS & INTERACTIONS (11\u201320) ===================== --><\/p>\n<div class=\"section-title\">Section 2 \u2014 Widgets &#038; Interactions<\/div>\n<div class=\"card bg-blue\">\n<h3>11) Core Widgets<\/h3>\n<p>Inputs: text, number, slider, selectbox, multiselect, date\/time, checkbox, radio, color picker.<\/p>\n<pre><code class=\"mono\">age = st.slider(\"Age\", 0, 100, 30)\r\ncolor = st.color_picker(\"Pick\", \"#00f\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-green\">\n<h3>12) Callbacks<\/h3>\n<p>Use <code>on_change<\/code> to run code when a widget value changes. Useful for validation and dependent widgets.<\/p>\n<pre><code class=\"mono\">def normalize(): st.session_state.q = st.session_state.q.strip()\r\nst.text_input(\"Query\", key=\"q\", on_change=normalize)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-amber\">\n<h3>13) Session State Patterns<\/h3>\n<p>Initialize keys, group related state in dicts, and persist user choices between pages. Use <code>st.session_state.clear()<\/code> to reset.<\/p>\n<pre><code class=\"mono\">st.session_state.setdefault(\"filters\", {\"country\":\"All\"})<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-violet\">\n<h3>14) Forms vs Live Inputs<\/h3>\n<p>Live inputs rerun on every change; forms wait for submit. Use forms for heavy queries and multi-field validation.<\/p>\n<pre><code class=\"mono\">with st.form(\"search\"): q = st.text_input(\"Q\"); go = st.form_submit_button(\"Go\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-rose\">\n<h3>15) Upload Large Files<\/h3>\n<p>Set server limits in config; stream processing with chunks and progress bars for UX.<\/p>\n<pre><code class=\"mono\">prog = st.progress(0)\r\nfor i in range(100): prog.progress(i+1)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-cyan\">\n<h3>16) Toasts, Status &#038; Spinners<\/h3>\n<p>Use <code>st.toast<\/code>, <code>st.status<\/code>, and <code>st.spinner<\/code> to communicate long tasks clearly.<\/p>\n<pre><code class=\"mono\">with st.spinner(\"Crunching...\"): time.sleep(2)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-lime\">\n<h3>17) Keyboard &#038; Hotkeys (Tip)<\/h3>\n<p>Wrap hotkeys with <code>st.components.v1.html<\/code> (JS) or keep it simple\u2014Streamlit favors click interactions.<\/p>\n<pre><code class=\"mono\">st.components.v1.html(\"&lt;script&gt;document.onkeydown=e=&gt;...&lt;\/script&gt;\", height=0)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-orange\">\n<h3>18) Multi-Page Apps<\/h3>\n<p>Create a <code>pages\/<\/code> folder; each <code>.py<\/code> becomes a page with its own sidebar nav. Share state via <code>st.session_state<\/code> and cached resources.<\/p>\n<pre><code class=\"mono\"># app.py + pages\/01_Explore.py + pages\/02_Train.py<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-indigo\">\n<h3>19) The Sidebar<\/h3>\n<p>Place global filters and navigation in <code>st.sidebar<\/code>; keep pages clean and focused.<\/p>\n<pre><code class=\"mono\">with st.sidebar: st.radio(\"Theme\", [\"Light\",\"Dark\"])<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-emerald\">\n<h3>20) Q&amp;A \u2014 \u201cWhen should I use forms?\u201d<\/h3>\n<p><span class=\"q\">Answer:<\/span> When inputs are coupled (query + filters) and you want one deliberate submit; also when querying heavy backends to avoid reruns on each keystroke.<\/p>\n<\/p><\/div>\n<p>      <!-- ===================== SECTION 3: DATA, CHARTS & MAPS (21\u201330) ===================== --><\/p>\n<div class=\"section-title\">Section 3 \u2014 Data, Charts, Maps &#038; Media<\/div>\n<div class=\"card bg-blue\">\n<h3>21) DataFrames<\/h3>\n<p><code>st.dataframe<\/code> is interactive (sort, filter); <code>st.table<\/code> is static. Use <code>column_config<\/code> to format and add links\/images.<\/p>\n<pre><code class=\"mono\">st.dataframe(df, use_container_width=True)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-green\">\n<h3>22) Altair &#038; Plotly<\/h3>\n<p>Embed rich charts from Altair\/Plotly. Bind widgets to filter data and redraw charts on change.<\/p>\n<pre><code class=\"mono\">import altair as alt\r\nst.altair_chart(alt.Chart(df).mark_bar().encode(x=\"cat\", y=\"val\"), use_container_width=True)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-amber\">\n<h3>23) Matplotlib &#038; Seaborn<\/h3>\n<p>Render Matplotlib figures via <code>st.pyplot<\/code>. Keep figures small; prefer Altair\/Plotly for interactivity.<\/p>\n<pre><code class=\"mono\">fig, ax = plt.subplots(); ax.plot([1,2,3],[1,4,9]); st.pyplot(fig)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-violet\">\n<h3>24) Maps with PyDeck<\/h3>\n<p>Use PyDeck for WebGL maps and layers (Scatterplot, Hexagon). Great for geo visualizations.<\/p>\n<pre><code class=\"mono\">import pydeck as pdk\r\nst.pydeck_chart(pdk.Deck(map_style=None, initial_view_state=pdk.ViewState(latitude=37.76, longitude=-122.4, zoom=10)))<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-rose\">\n<h3>25) Media: Images, Audio, Video<\/h3>\n<p>Use <code>st.image<\/code>, <code>st.audio<\/code>, <code>st.video<\/code> to preview content. Combine with uploaders to build media tools quickly.<\/p>\n<pre><code class=\"mono\">st.image(\"plot.png\"); st.audio(data, format=\"audio\/wav\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-cyan\">\n<h3>26) Ag-Grid \/ Data Editors<\/h3>\n<p><code>st.data_editor<\/code> enables editable tables. For advanced grids, use community components (Ag-Grid) via <code>st.components<\/code>.<\/p>\n<pre><code class=\"mono\">edited = st.data_editor(df)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-lime\">\n<h3>27) Large Data Tips<\/h3>\n<p>Lazy load, paginate, sample, or aggregate. Cache results; stream results to the UI incrementally with <code>st.empty<\/code>.<\/p>\n<pre><code class=\"mono\">slot = st.empty()\r\nfor chunk in read_big(): slot.dataframe(chunk)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-orange\">\n<h3>28) File System Access<\/h3>\n<p>Use <code>st.file_uploader<\/code> or mount volumes when deploying. Avoid blocking I\/O; offload to threads for responsiveness.<\/p>\n<\/p><\/div>\n<div class=\"card bg-indigo\">\n<h3>29) Theming Charts<\/h3>\n<p>Match dark\/light mode with chart themes (Plotly templates, Altair themes). Respect Streamlit theme settings.<\/p>\n<pre><code class=\"mono\">st.plotly_chart(fig, use_container_width=True)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-emerald\">\n<h3>30) Q&amp;A \u2014 \u201cWhen use PyDeck vs Altair?\u201d<\/h3>\n<p><span class=\"q\">Answer:<\/span> PyDeck for heavy geospatial layers and 3D; Altair for statistical charts. Use both\u2014Altair for summaries + PyDeck for spatial drill-down.<\/p>\n<\/p><\/div>\n<p>      <!-- ===================== SECTION 4: ML, LLMs & BACKENDS (31\u201340) ===================== --><\/p>\n<div class=\"section-title\">Section 4 \u2014 ML Apps, LLMs, Backends &#038; Deployment<\/div>\n<div class=\"card bg-blue\">\n<h3>31) Model Inference App<\/h3>\n<p>Load a pickled model\/cache the object; predict on user input. Avoid reloading per rerun by using <code>@st.cache_resource<\/code>.<\/p>\n<pre><code class=\"mono\">@st.cache_resource\r\ndef get_model(): return joblib.load(\"model.pkl\")\r\nmodel = get_model(); st.write(model.predict([[sepal, petal]]))<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-green\">\n<h3>32) Batch Jobs &#038; Progress<\/h3>\n<p>Long tasks: show progress, stream logs to UI, and let users download results. Consider background workers for heavy tasks.<\/p>\n<pre><code class=\"mono\">log = st.empty()\r\nfor i in range(100): log.text(f\"Step {i}\"); time.sleep(.05)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-amber\">\n<h3>33) LLM Chat UI Scaffold<\/h3>\n<p>Build a chat with message history and streaming tokens. Wrap API calls with timeouts\/retries; cache embeddings if used.<\/p>\n<pre><code class=\"mono\">if \"chat\" not in st.session_state: st.session_state.chat=[]\r\nmsg = st.chat_input(\"Ask\u2026\")\r\nif msg: st.session_state.chat.append((\"user\", msg))\r\nfor role, text in st.session_state.chat: st.chat_message(role).write(text)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-violet\">\n<h3>34) RAG Pattern<\/h3>\n<p>Index docs \u2192 embed \u2192 search top-k \u2192 feed to LLM. Cache vector index and document chunks as resources.<\/p>\n<pre><code class=\"mono\"># pseudo: vectors = embed(chunks); hits = search(q); prompt = fmt(hits, q)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-rose\">\n<h3>35) Auth Basics<\/h3>\n<p>Use secrets, simple login forms, or reverse proxy auth. For enterprise, front with an auth layer (Auth0\/Okta) and pass headers.<\/p>\n<pre><code class=\"mono\">if st.secrets.get(\"ADMIN_PASS\") == st.text_input(\"Pass\", type=\"password\"): st.success(\"ok\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-cyan\">\n<h3>36) Secrets &#038; Config<\/h3>\n<p>Place keys in <code>.streamlit\/secrets.toml<\/code>; access via <code>st.secrets<\/code>. Avoid committing secrets to VCS.<\/p>\n<pre><code class=\"mono\">api_key = st.secrets[\"openai\"][\"key\"]<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-lime\">\n<h3>37) Databases<\/h3>\n<p>Cache the engine\/connection; use parameterized queries; stream results to avoid memory blowups.<\/p>\n<pre><code class=\"mono\">@st.cache_resource\r\ndef get_engine(): return create_engine(st.secrets[\"db_url\"])<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-orange\">\n<h3>38) Multiprocessing &#038; Threads<\/h3>\n<p>For CPU-bound tasks, delegate to processes; for I\/O use threads\/async libs. Communicate back via polling UI placeholders.<\/p>\n<\/p><\/div>\n<div class=\"card bg-indigo\">\n<h3>39) Deployment Options<\/h3>\n<p>Deploy on Streamlit Community Cloud, containerize (Docker), or run behind Nginx\/Gunicorn. Configure caching, secrets, and health endpoints.<\/p>\n<pre><code class=\"mono\"># Dockerfile (sketch)\r\nFROM python:3.11-slim\r\nCOPY . \/app; WORKDIR \/app\r\nRUN pip install -r requirements.txt\r\nCMD [\"streamlit\",\"run\",\"app.py\",\"--server.port=8501\",\"--server.address=0.0.0.0\"]<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-emerald\">\n<h3>40) Q&amp;A \u2014 \u201cHow to keep apps responsive?\u201d<\/h3>\n<p><span class=\"q\">Answer:<\/span> Cache heavy functions, precompute expensive data, batch API calls, stream progress, and avoid blocking the main thread (offload to workers).<\/p>\n<\/p><\/div>\n<p>      <!-- ===================== SECTION 5: TESTING, THEMING, TIPS & INTERVIEW (41\u201350) ===================== --><\/p>\n<div class=\"section-title\">Section 5 \u2014 Testing, Theming, Tips &#038; Interview Q&amp;A<\/div>\n<div class=\"card bg-blue\">\n<h3>41) App Structure<\/h3>\n<p>Organize into <code>app.py<\/code>, <code>pages\/<\/code>, <code>components\/<\/code>, <code>lib\/<\/code>. Keep UI thin; put logic in functions for testability.<\/p>\n<pre><code class=\"mono\">lib\/\r\n  data.py   # IO & caching\r\n  charts.py # chart builders\r\ncomponents\/\r\n  filters.py # small UI pieces<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-green\">\n<h3>42) Theming<\/h3>\n<p>Customize via <code>.streamlit\/config.toml<\/code> (primary colors, font). Prefer app-level consistency over per-widget styling.<\/p>\n<pre><code class=\"mono\">[theme]\r\nbase=\"light\"\r\nprimaryColor=\"#0ea5e9\"\r\nfont=\"sans serif\"<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-amber\">\n<h3>43) Accessibility<\/h3>\n<p>Use semantic headings, alt text for images, keyboard-friendly widgets, and high-contrast themes.<\/p>\n<pre><code class=\"mono\">st.title(\"Sales Dashboard\"); st.caption(\"Accessible by design\")<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-violet\">\n<h3>44) Testing &#038; CI<\/h3>\n<p>Unit test logic modules; smoke test app launch in CI; lint with Ruff\/Flake8; pin requirements for reproducibility.<\/p>\n<pre><code class=\"mono\">pytest -q; streamlit run app.py --server.headless true<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-rose\">\n<h3>45) Performance Checklist<\/h3>\n<p>Cache I\/O and models, paginate large tables, avoid per-row Python loops (vectorize), pre-aggregate, compress images, and memoize chart builders.<\/p>\n<pre><code class=\"mono\">@st.cache_data(show_spinner=False)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-cyan\">\n<h3>46) Common Pitfalls<\/h3>\n<p>Recreating DB clients on every rerun, missing keys in session_state, doing heavy work on each keystroke, storing secrets in code, and not handling file types.<\/p>\n<pre><code class=\"mono\">assert \"key\" in st.session_state, \"Initialize first!\"<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-lime\">\n<h3>47) Custom Components<\/h3>\n<p>Embed custom JS\/HTML or build components via Streamlit\u2019s component API (React-based). Use when built-ins aren\u2019t enough.<\/p>\n<pre><code class=\"mono\">st.components.v1.html(\"&lt;div&gt;Custom widget&lt;\/div&gt;\", height=60)<\/code><\/pre>\n<\/p><\/div>\n<div class=\"card bg-orange\">\n<h3>48) Security &#038; Privacy<\/h3>\n<p>Validate uploads, sanitize HTML, throttle external API calls, scrub PII in logs, and set CORS\/headers at proxy level when public.<\/p>\n<\/p><\/div>\n<div class=\"card bg-indigo\">\n<h3>49) Production Ops<\/h3>\n<p>Monitor with health pings, log errors\/latency, set memory\/CPU limits, autoscale containers if traffic spikes, and add feature flags.<\/p>\n<\/p><\/div>\n<div class=\"card bg-emerald qa\">\n<h3>50) Interview Q&amp;A \u2014 20 Practical Questions (Expanded)<\/h3>\n<p><b>1) Why Streamlit?<\/b> Rapid Python-only UI for data\/ML\u2014fast iteration, low ceremony, built-in hosting options.<\/p>\n<p><b>2) How does rerun work?<\/b> Every widget interaction triggers a top-to-bottom script rerun; the UI reflects current state.<\/p>\n<p><b>3) session_state use cases?<\/b> Persist selections, wizard steps, auth flags, and cross-page state.<\/p>\n<p><b>4) cache_data vs cache_resource?<\/b> <i>data<\/i> caches function outputs (pure), <i>resource<\/i> caches heavy objects (clients\/models).<\/p>\n<p><b>5) Forms vs live inputs?<\/b> Forms batch inputs and submit once; live inputs rerun on every change\u2014use forms for heavy backends.<\/p>\n<p><b>6) Handling long tasks?<\/b> Spinners, progress, log streaming, and background workers; avoid blocking UI.<\/p>\n<p><b>7) Multiple pages?<\/b> Place files in <code>pages\/<\/code>; share resources via caches and <code>session_state<\/code>.<\/p>\n<p><b>8) Chart libraries?<\/b> Native charts, Altair, Plotly, Matplotlib, PyDeck; choose based on interactivity and data size.<\/p>\n<p><b>9) Deploy options?<\/b> Streamlit Cloud, Docker, or your server behind a reverse proxy; set secrets and config.<\/p>\n<p><b>10) Auth strategies?<\/b> Simple password in secrets, OAuth via proxy, or custom components; Streamlit itself is framework-agnostic.<\/p>\n<p><b>11) File uploads at scale?<\/b> Raise limits, stream chunks, validate types, and process asynchronously if heavy.<\/p>\n<p><b>12) Prevent expensive recompute?<\/b> Cache results, memoize chart data, and use forms\/callbacks instead of per-keystroke reruns.<\/p>\n<p><b>13) How to persist selections?<\/b> Initialize keys, write callbacks to sync values, and store JSON in session_state.<\/p>\n<p><b>14) Dataframe performance?<\/b> Sample, paginate, or summarize; avoid rendering 100k+ rows; use <code>data_editor<\/code> selectively.<\/p>\n<p><b>15) Integrating databases?<\/b> Cache connections, parameterize queries, stream results, and handle timeouts.<\/p>\n<p><b>16) Building LLM chat?<\/b> Keep a messages list, stream tokens, throttle calls, cache embeddings for RAG.<\/p>\n<p><b>17) Custom components vs built-ins?<\/b> Use built-ins first; reach for components when you need bespoke UI\/JS behavior.<\/p>\n<p><b>18) Theming best practice?<\/b> Configure global theme in <code>.streamlit\/config.toml<\/code> and keep palettes consistent.<\/p>\n<p><b>19) Testing Streamlit apps?<\/b> Unit test logic; smoke test app launch; consider Playwright for E2E user flows.<\/p>\n<p><b>20) Common mistakes?<\/b> No caching, recreating resources per rerun, mixing secrets into code, giant tables, and blocking calls without feedback.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Streamlit Pocket Book \u2014 Uplatz 50 in-depth cards \u2022 Wide layout \u2022 Readable examples \u2022 20-question interview Q&amp;A included Section 1 \u2014 Foundations 1) What is Streamlit? Streamlit is a <span class=\"readmore\"><a href=\"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/\">Read More &#8230;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2462,2420],"tags":[],"class_list":["post-4471","post","type-post","status-publish","format-standard","hentry","category-pocket-book","category-streamlit"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Streamlit Pocket Book | Uplatz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Streamlit Pocket Book | Uplatz Blog\" \/>\n<meta property=\"og:description\" content=\"Streamlit Pocket Book \u2014 Uplatz 50 in-depth cards \u2022 Wide layout \u2022 Readable examples \u2022 20-question interview Q&amp;A included Section 1 \u2014 Foundations 1) What is Streamlit? Streamlit is a Read More ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/\" \/>\n<meta property=\"og:site_name\" content=\"Uplatz Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Uplatz-1077816825610769\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-09T16:10:32+00:00\" \/>\n<meta name=\"author\" content=\"uplatzblog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uplatz_global\" \/>\n<meta name=\"twitter:site\" content=\"@uplatz_global\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"uplatzblog\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/\"},\"author\":{\"name\":\"uplatzblog\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/person\\\/8ecae69a21d0757bdb2f776e67d2645e\"},\"headline\":\"Streamlit Pocket Book\",\"datePublished\":\"2025-08-09T16:10:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/\"},\"wordCount\":1269,\"publisher\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#organization\"},\"articleSection\":[\"Pocket Book\",\"Streamlit\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/\",\"name\":\"Streamlit Pocket Book | Uplatz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#website\"},\"datePublished\":\"2025-08-09T16:10:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/streamlit-pocket-book\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Streamlit Pocket Book\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/\",\"name\":\"Uplatz Blog\",\"description\":\"Uplatz is a global IT Training &amp; Consulting company\",\"publisher\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#organization\",\"name\":\"uplatz.com\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/Uplatz-Logo-Copy-2.png\",\"contentUrl\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/Uplatz-Logo-Copy-2.png\",\"width\":1280,\"height\":800,\"caption\":\"uplatz.com\"},\"image\":{\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Uplatz-1077816825610769\\\/\",\"https:\\\/\\\/x.com\\\/uplatz_global\",\"https:\\\/\\\/www.instagram.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/7956715?trk=tyah&amp;amp;amp;amp;trkInfo=clickedVertical:company,clickedEntityId:7956715,idx:1-1-1,tarId:1464353969447,tas:uplatz\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/uplatz.com\\\/blog\\\/#\\\/schema\\\/person\\\/8ecae69a21d0757bdb2f776e67d2645e\",\"name\":\"uplatzblog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g\",\"caption\":\"uplatzblog\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Streamlit Pocket Book | Uplatz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/","og_locale":"en_US","og_type":"article","og_title":"Streamlit Pocket Book | Uplatz Blog","og_description":"Streamlit Pocket Book \u2014 Uplatz 50 in-depth cards \u2022 Wide layout \u2022 Readable examples \u2022 20-question interview Q&amp;A included Section 1 \u2014 Foundations 1) What is Streamlit? Streamlit is a Read More ...","og_url":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/","og_site_name":"Uplatz Blog","article_publisher":"https:\/\/www.facebook.com\/Uplatz-1077816825610769\/","article_published_time":"2025-08-09T16:10:32+00:00","author":"uplatzblog","twitter_card":"summary_large_image","twitter_creator":"@uplatz_global","twitter_site":"@uplatz_global","twitter_misc":{"Written by":"uplatzblog"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/#article","isPartOf":{"@id":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/"},"author":{"name":"uplatzblog","@id":"https:\/\/uplatz.com\/blog\/#\/schema\/person\/8ecae69a21d0757bdb2f776e67d2645e"},"headline":"Streamlit Pocket Book","datePublished":"2025-08-09T16:10:32+00:00","mainEntityOfPage":{"@id":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/"},"wordCount":1269,"publisher":{"@id":"https:\/\/uplatz.com\/blog\/#organization"},"articleSection":["Pocket Book","Streamlit"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/","url":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/","name":"Streamlit Pocket Book | Uplatz Blog","isPartOf":{"@id":"https:\/\/uplatz.com\/blog\/#website"},"datePublished":"2025-08-09T16:10:32+00:00","breadcrumb":{"@id":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uplatz.com\/blog\/streamlit-pocket-book\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uplatz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Streamlit Pocket Book"}]},{"@type":"WebSite","@id":"https:\/\/uplatz.com\/blog\/#website","url":"https:\/\/uplatz.com\/blog\/","name":"Uplatz Blog","description":"Uplatz is a global IT Training &amp; Consulting company","publisher":{"@id":"https:\/\/uplatz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uplatz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/uplatz.com\/blog\/#organization","name":"uplatz.com","url":"https:\/\/uplatz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uplatz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2016\/11\/Uplatz-Logo-Copy-2.png","contentUrl":"https:\/\/uplatz.com\/blog\/wp-content\/uploads\/2016\/11\/Uplatz-Logo-Copy-2.png","width":1280,"height":800,"caption":"uplatz.com"},"image":{"@id":"https:\/\/uplatz.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Uplatz-1077816825610769\/","https:\/\/x.com\/uplatz_global","https:\/\/www.instagram.com\/","https:\/\/www.linkedin.com\/company\/7956715?trk=tyah&amp;amp;amp;amp;trkInfo=clickedVertical:company,clickedEntityId:7956715,idx:1-1-1,tarId:1464353969447,tas:uplatz"]},{"@type":"Person","@id":"https:\/\/uplatz.com\/blog\/#\/schema\/person\/8ecae69a21d0757bdb2f776e67d2645e","name":"uplatzblog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7f814c72279199f59ded4418a8653ad15f5f8904ac75e025a4e2abe24d58fa5d?s=96&d=mm&r=g","caption":"uplatzblog"}}]}},"_links":{"self":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts\/4471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/comments?post=4471"}],"version-history":[{"count":1,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts\/4471\/revisions"}],"predecessor-version":[{"id":4472,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/posts\/4471\/revisions\/4472"}],"wp:attachment":[{"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/media?parent=4471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/categories?post=4471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uplatz.com\/blog\/wp-json\/wp\/v2\/tags?post=4471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}