There’s a dirty secret about AI-built React sites: Google often can’t read them.

Lovable.dev is genuinely impressive. It generates beautiful, polished React UIs faster than any tool I’ve used. But when I checked Google Search Console after launching my site, the crawled page was essentially empty — just a <div id="root"></div> shell. All my carefully crafted copy, headings, and feature descriptions were invisible to search engines.

The common fix people reach for is a third-party prerendering service like Prerender.io or Hado SEO. These sit in front of your site, detect bots, and serve cached HTML. They work — but they cost money, add latency, and introduce another service to maintain.

I found a cleaner path: Static Site Generation (SSG) directly in the build pipeline, using vite-react-ssg. No third-party service. No extra cost. Just real, pre-rendered HTML files served from Vercel's edge CDN.

Here’s exactly how I did it.

Why Lovable Projects Don’t Work Well for SEO Out of the Box

Lovable generates standard Vite + React Single Page Applications (SPAs). In a SPA, the browser receives a nearly empty HTML file and then JavaScript builds the entire page after load. For users, this is fine — the experience is fast and interactive. For search engine crawlers, it’s a problem.

While Google can execute JavaScript, it’s a slower two-phase process. Your pages get indexed less reliably and often with a delay. More critically, other crawlers — AI agents, social media link previews, Bing, DuckDuckGo — frequently don’t run JavaScript at all. They see nothing.

Static Site Generation solves this by running your React components at build time and outputting real .html files for every route. When Google visits /pricing, it gets a fully formed HTML page — no JavaScript required to see your content.

The best part: the final output is just static files. No Node.js server. No runtime. Perfect for a marketing site, landing page, or documentation hub where all you really want is fast, indexable HTML anyway.

The Architecture: A Three-Way Sync

The setup I landed on looks like this:

Lovable ⟷ GitHub ⟷ Vercel

Crucially, every connection here is bidirectional:

• Lovable ↔ GitHub: Lovable now supports two-way sync. Changes made in Lovable push to GitHub automatically. Changes made directly in GitHub (editing files, adding new ones) sync back into Lovable.
• GitHub → Vercel: Every push to GitHub triggers an automatic Vercel deployment via webhook. No manual steps required.

This means I can keep designing in Lovable — which genuinely has better design taste than I do — while the build pipeline handles SSG transparently on every deploy.

Step 1 — Install vite-react-ssg

After connecting Lovable to GitHub and cloning the repo locally, install the SSG package:

npm install vite-react-ssg

Note: The popular vite-ssg package is Vue-specific. For React you need vite-react-ssg.

Step 2 — Create src/routes.ts

This is the file that tells vite-react-ssg which pages to pre-render at build time. Create it at src/routes.ts:

export const routes = [
  { path: '/',          lazy: () => import('./pages/Home.tsx') },
  { path: '/pricing',   lazy: () => import('./pages/Pricing.tsx') },
  { path: '/guides',    lazy: () => import('./pages/Guides.tsx') },
  { path: '/about',     lazy: () => import('./pages/About.tsx') },
  { path: '/contact',   lazy: () => import('./pages/Contact.tsx') },
]

Every route listed here gets its own pre-rendered index.html in the build output. If a route isn't listed, it won't be pre-rendered — so make sure all your pages are included.

Step 3 — Update src/main.tsx

Replace the default SPA entry point with the SSG version:

// Before — standard SPA
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(<App />)

// After — SSG enabled
import { ViteReactSSG } from 'vite-react-ssg'
import { routes } from './routes'
import './index.css'

export const createRoot = ViteReactSSG({ routes })

Step 4 — Update package.json

Change the build script from vite build to vite-react-ssg build:

{
  "scripts": {
    "dev":   "vite",
    "build": "vite-react-ssg build"
  }
}

Step 5 — Guard Browser-Only Code

SSG runs your components in Node.js at build time — there’s no window or document available. Lovable projects sometimes reference these directly. Guard them like this:

// ❌ Crashes at build time
const width = window.innerWidth

// ✅ Safe
const width = typeof window !== 'undefined' ? window.innerWidth : 0

Anything inside useEffect() is already safe — it only runs in the browser, never during the SSG build.

Step 6 — Create vercel.json at the Project Root

This is a critical step that’s easy to get wrong. Create vercel.json in the root of the project:

{
  "cleanUrls": true
}

cleanUrls: true tells Vercel to serve /pricing.html when someone visits /pricing, /guides/how-to-start-art-collecting.html for that route, and so on — automatically, without any rewrite rules.

A common mistake here: many guides tell you to add a catch-all rewrite like { "source": "/(.*)", "destination": "/index.html" }. Don't do this for SSG. That rule intercepts every request and serves the homepage HTML for everything — defeating the entire point of pre-rendering separate pages.

Step 7 — Configure Vercel’s Build Command

In Vercel’s project settings (or during initial import), set:

Setting Value Framework Preset Vite Build Command vite-react-ssg build Output Directory dist

That’s it. Vercel will run the SSG build on every deploy.

How to Add Files Without Leaving GitHub

Because Lovable ↔ GitHub sync is bidirectional, you can create src/routes.ts and vercel.json directly in GitHub's web editor. Lovable will automatically pick up those changes — no conflicts, no manual syncing.

This is useful for infrastructure files like vercel.json that Lovable doesn't need to "know about" but should still be in the repo.

Verifying It Works

After deploying, right-click your live page and select View Page Source. If SSG is working, you’ll see your actual content — headings, paragraphs, navigation links — directly in the HTML. You should also see data-server-rendered="true" on the root div.

If you still see just <div id="root"></div>, the main.tsx change hasn't taken effect yet.

Your build output in dist/ should also contain individual HTML files per route:

dist/
  index.html
  pricing.html
  about.html
  contact.html
  guides/
    how-to-start-art-collecting.html
    art-valuation.html

Each one is a fully self-contained, pre-rendered page.

What You Get at the End

• Real HTML for every page — crawlable by Google, Bing, AI agents, and social link previews
• No third-party prerendering service — no Prerender.io, no Hado SEO, no extra cost
• Lovable still does the design — the authoring workflow is unchanged
• Automatic deploys — push in Lovable or GitHub, Vercel rebuilds in under a minute
• Edge CDN delivery — Vercel serves static files from its global edge network

The final architecture is deceptively simple: Lovable generates React, GitHub stores it, vite-react-ssg bakes it into HTML at build time, and Vercel serves it. No servers. No runtime. No prerender middleware.

Just fast, static, fully-indexed HTML — with a React developer experience that keeps your design looking great.

If you’re building on Lovable and care about SEO, this is the cleanest path I’ve found. The whole setup takes about an hour and pays dividends every time Google re-crawls your site.

What is Asymmetric Property Visibility?

In PHP 8.4, you can now define different visibility levels for reading and writing a property within a class.

Previously, PHP allowed properties to be public, protected, or private, but both reading and writing had the same visibility level. With Asymmetric Property Visibility, you can set separate visibility for getting and setting a property.

A Basic Example

class User {
    public string $name { public get; private set; }

    public function __construct(string $name) {
        $this->name = $name; // Allowed: private setter is used inside the class
    }
    public function changeName(string $newName) {
        $this->name = $newName; // Allowed: inside class
    }
}

$user = new User("Alice");
echo $user->name; // ✅ Allowed: public getter
$user->name = "Bob"; // ❌ Error: Cannot modify, setter is private

Key Takeaways

• get visibility is public, allowing read access from anywhere.
• set visibility is private, so only class methods can modify the property.

Example 2: Preventing Direct Modification of Sensitive Properties

class BankAccount {
    public int $balance { public get; private set; }\

    public function __construct(int $initialBalance) {
        $this->balance = $initialBalance;
    }
    public function deposit(int $amount) {
        $this->balance += $amount; // ✅ Allowed: inside class
    }
    public function withdraw(int $amount) {
        if ($amount > $this->balance) {
            throw new Exception("Insufficient funds");
        }
        $this->balance -= $amount; // ✅ Allowed: inside class
    }
}
$account = new BankAccount(1000);
echo $account->balance; // ✅ Allowed: public getter
$account->balance = 500; // ❌ Error: Cannot modify, setter is private

Key Takeaways

• Prevents unauthorized modifications to $balance while allowing controlled updates through class methods.
• Improves security by ensuring logic (e.g., preventing overdrafts) is always enforced.

Caveats & Considerations

• This feature only applies to typed properties (int, string, array, etc.). Typed properties are supported since PHP 7.4.
• You must specify a visibility level for both get and set (e.g., { public get; private set; }).
• Asymmetric visibility cannot be applied to untyped properties.

How Was Asymmetric Property Visibility Achieved Before PHP 8.4?

Before Asymmetric Property Visibility, PHP only allowed single visibility for properties (public, protected, or private). This meant that if a property was readable, it was also writable unless additional methods were used to restrict modifications.

To achieve similar behavior, developers had to use getter and setter methods manually using Getter & Setter Methods (Manual Encapsulation)

For example:

class User {
    private string $name;

    public function __construct(string $name) {
        $this->name = $name;
    }

    // Public getter method
    public function getName(): string {
        return $this->name;
    }

    // Private setter method (prevents external modification)
    private function setName(string $name): void {
        $this->name = $name;
    }

    public function changeName(string $newName): void {
        $this->setName($newName); // Allowed inside class
    }
}

$user = new User("Alice");

echo $user->getName(); // ✅ Allowed: public getter
$user->setName("Bob"); // ❌ Error: Cannot access private method
$user->name = "Bob"; // ❌ Error: Cannot access private property

Problems with the Traditional Approach

1. More Boilerplate Code

• Requires explicit getter and setter methods for each property.
• Increases code duplication when dealing with many properties.

2. Less Readable & Natural Code

• Instead of $user->name, you need to call $user->getName().
• Assigning a value ($user->name = "Bob";) is replaced by a method ($user->changeName("Bob");).

Why Asymmetric Property Visibility Matters

Asymmetric Property Visibility in PHP 8.4 enhances encapsulation by allowing developers to set different visibility levels for reading and writing a property. This means a property can be publicly readable but privately writable, preventing unintended modifications while still making data accessible.

Previously, achieving this required workarounds like getter and setter methods, but now it can be done more cleanly and intuitively. This feature improves code maintainability, security, and clarity, making it easier to enforce strict control over property access without extra boilerplate.

Final Thoughts

Before PHP 8.4, getter and setter methods were the only way to enforce asymmetric visibility. While effective, it resulted in verbose and less readable code. With Asymmetric Property Visibility, PHP now provides native support for defining different access levels for reading and writing properties, making property management much cleaner and more intuitive.

About the Author

The author is a full-stack web developer who created SQL-based data analytics and BI reports tool — Querro at (querro.io).

Debugging is an essential part of PHP development, and using Visual Studio Code with XDebug can greatly enhance your workflow. This guide will walk you through setting up XDebug, enabling breakpoints, stepping through code, using stack traces, and troubleshooting common issues.

1. Installing XDebug

Before you can debug PHP with VSCode, you need to ensure that XDebug is installed on your system.

Check if XDebug is Installed

From a phpinfo page, and check wether XDebug section and it is enabled.

Install XDebug If It Is Missing

If XDebug is missing, you can install it using pecl:

pecl install xdebug

After installation, add this line to your php.ini file:

zend_extension=xdebug

Remembere to restart your web server or PHP service:

sudo systemctl restart apache2  # For Apache
sudo systemctl restart php-fpm  # For PHP-FPM

Now we need to configure XDebug to connect to VSCode

2. Configuring XDebug for VSCode

Edit your php.ini file and add the following configuration:

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=127.0.0.1
xdebug.client_port=9003
xdebug.log=/var/log/xdebug.log

Important:

Ensure your PHP service is restarted for any changes made in php.ini to take effect.

3. Setting Up VSCode for XDebug

1. Install the PHP Debug Extension

• Open VSCode.
• Go to Extensions (Ctrl+Shift+X).
• Search for PHP Debug by Felix Becker and install it.

2. Configure VSCode Debugger

• Open your project in VSCode.
• Go to the Run and Debug panel (Ctrl+Shift+D).
• Click on create a launch.json file. It should create default configuration as the following with port 9003. It is absolutely critial to have the same port as what is in xdebug.client_port in php.ini in previous step.

{
   "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9003
        }
    ]
}

3. Start the Debugger

• Click the green Start Debugging button or press F5.
• Ensure XDebug is running and listening on port 9003. It actually can be any port number as 9003 is default.

The debugger bar should now appear right below tabs in VSCode.

4. Debugging Features

Setting Breakpoints

• Open any PHP file.
• Click in the left margin next to a line number or press F9 to set a breakpoint.
• Run the debugger (F5) and execute the PHP script in your browser.
• The script execution will pause at the breakpoint.

Stepping Through Code

While debugging, you can control execution using:

• Step Over (F10) – Move to the next line of code.
• Step Into (F11) – Enter into function calls.
• Step Out (Shift+F11) – Exit the current function.
• Continue (F5) – Resume execution until the next breakpoint.

Using Stack Trace

• The Call Stack panel in VSCode shows the sequence of function calls leading up to the breakpoint.
• Helps trace errors in deeply nested functions.
• Click on any function in the stack to inspect its execution.

5. Troubleshooting Common Issues

Issue 1: Debugger Not Stopping at Breakpoints

• Ensure XDebug is installed and configured correctly in phpinfo (See step 1)
• Make sure the matching port (e.g. 9003) is set in both php.ini and launch.json.
• Always restart Apache or PHP-FPM after making changes.

Issue 2: XDebug Not Connecting to VSCode

• Verify the logs in /var/log/xdebug.log for connection issues.
• Ensure VSCode is listening for XDebug (F5 in debug mode).
• Disable other applications using port 9003 (like another debugger).

Issue 3: Path Mapping Problems

• Ensure pathMappings in launch.json correctly maps the server path to the local workspace
• Add $_SERVER['DOCUMENT_ROOT'] in your script to verify paths.

Conclusion

VSCode and XDebug together make debugging PHP a seamless experience. By following this guide, you should be able to install and configure XDebug properly, and set breakpoints and step through code, and also troubleshoot common debugging issues.

Finally, if manually tinkering isn’t your thing, you can opt for a hassle-free solution like MAMP or XAMMP.

Happy debugging! 🚀

About the Author

The author is a full-stack web developer who created SQL-based data analytics and BI reports tool — Querro at (querro.io).

While learning React, I couldn’t help but notice how slow the instructor spoke in the recorded lectures. It makes sense being intentionally slow to give time for students to think while absorbing the materials. But after a while, it started to feel like I was waiting for molasses to pour on a chilly day.

That’s when I discovered the magical speed-up button. Just like that, I was zipping through lectures at 2x speed. It’s like turning your study sessions into an action movie — everything’s faster, more intense, and oddly satisfying.

It turns out, this isn’t just a life hack — it’s backed by science! According to a Caltech study, the human brain is actually faster than our ears. “Multimodal learning” — fancy talk for combining audio and visuals — supercharges how much we can absorb. So, not only are you learning faster, but your brain is also giving you a virtual high-five for being efficient.

Why It Works

Our brains is capable to process and retain information much faster than the pace of normal speech. Increasing the playback speed while listening, it helps to

• Increases Focus: The faster pace reduces the tendency to zone out.
• Improves Comprehension: Your brain adapts to processing information more efficiently over time.
• Saves Time: Completes a 2-hour lecture in just 1 hour, leaving room for review or practice.

How to Use the Hack Effectively

It does take some practice to get to 2x speed-listening. For me, 1.2x is a good comfortable starter pace; 1.5x is efficient and manageable for most content; and 2.0x requires focus but significantly speeds up learning. With time and practice, anyone can adapt and effectively process content at faster speeds.

I’ve tried experimenting with speeds beyond 2x, but it quickly becomes overwhelming and impractical, often leading to burnout. I wouldn’t recommend it with only exception I’m reviewing previously learned material or revisiting old chapters.

In many video players, such as the one in Udemy and Coursea, you can simply press the “+” or “-” keys on your keyboard to adjust the playback speed while media is playing. It can often go up to 10x speed before becoming unrecognizable! It’s amazing to fly through previously learned materials using these keys. Speed up (+) as much as you can still retain information, and slow down (-) when you need to sink in the details.

1. Start Gradually

Don’t expect you will be zipping through materials like superman onset. Instead, try at 1.25x or 1.5x speed to get used to faster playback. Gradually increase to 2x speed as your brain adapts to processing quicker speech.

2. Leverage Closed Captions

This is super important as part of “multimodal learning” to engage our visual sensors to read subtitles to help with clarity, especially for technical or unfamiliar content.

3. Take Notes Strategically

Use digital tools like Notion or OneNote to jot down key points quickly. Online classes like Udemy and Coursea have note taking tools built-in with video timestamp.

4. Revisit Critical Sections

It’s perfectly fine to slow down and walk after a sprint, especially when revisiting difficult sections at a normal speed to ensure thorough understanding.

Free Tools for Enhanced Learning

1. Playback Speed Controllers:

• Chrome Extensions:
• Video Speed Controller: Allows fine-tuned speed adjustments on most video platforms.
• Enhancer for YouTube: Adds playback speed shortcuts for YouTube.
• Native Tools:
• YouTube, Udemy, Coursera, and similar platforms often have built-in speed controls.

2. Note-Taking Apps:

• Notion, Obsidian, or Evernote: Great for organizing notes with tags, links, and summaries.
• AudioNote: Syncs audio or video with your notes.
• ReClipped: Lets you save video highlights and make notes directly linked to timestamps.

3. Flashcard Tools:

• Anki (spaced repetition): Use it to create cards from your notes for active recall.
• Quizlet: Easier to set up and includes premade decks.

You can simply press the “+” or “-” keys on your keyboard to adjust the playback speed. It can often go up to 10x speed before becoming unrecognizable!

Sample Routine for Learning with 2x Speed

I’ve developed an approach to studying at 2x speed that strikes a balance between efficiency and comprehension. My method combines strategic preparation, active note-taking, and consistent review, allowing me to absorb complex concepts quickly while ensuring a solid understanding.

Here’s how I’ve made it work for me and how it can work for you too.

1. Preparation (5 mins):

• Review the syllabus or key concepts for the session.
• Set a specific goal (e.g., “Understand how recursion works”).

2. Study (30–60 mins):

• Watch the video at 1.2x — 2x speed, adjust accordingly
• Pause to note down key points or rewatch unclear sections.

3. Review (15 mins):

• Summarize what you learned.
• Optional — Create flashcards or a mind map of the main ideas.

4. Practice (30+ mins):

• Practice exercises or implement the learned concepts in real-world scenarios.

Final Thoughts

This simple hack can transform how you learn, making it faster, more efficient, and more engaging. Combine it with proven techniques like active recall and spaced repetition, and you’ll be well on your way to mastering new skills in no time. Try it out, and unlock your potential!

About the Author

The author is a veteran web developer who created the popular PHP datagrid tool (phpgrid.com), harnessing the power of CRUD to make the world a better place — at least for developers looking to simplify their lives!

var type = 0;
...
var wfStart = "Server Workflow Start";
var num = 100000;
...
var yesOrNo = "Yes";

At first glance, these names seemed cryptic at best. After 25 minutes of piecing together the context (aided by poorly written comments), I finally understood what they meant.

What’s wrong here? To me, it seems the original developer rushed through the implementation, disregarding the importance of meaningful variable names. Instead, they left behind a confusing mess for anyone working on the code later.

Imagine the difference if the variables were given descriptive, self-explanatory names. Here’s an improved version:

var typeCode = 0;
const SERVER_WORKFLOW_START = "Server Workflow Start";
var maxLimit = 100000;
var isConfirmed = true;

These changes transform the code into something far more understandable. It reflects a clear understanding of the task at hand, good communication of intent.

The Importance of Clarity and Communication

Great variable names make it possible to read code almost like a narrative, reducing the need for excessive comments and helping others — and your future self — understand what’s going on.

Consider this example:

int acctWithdrawn; // number of customers with withdrawn accounts
string ln; // last name of the current customer

These names require a reader to remember the comments or consult documentation to understand what’s going on. With clearer names, this confusion disappears:

int  customerWidthdrawnAccount;
string customerLastName;

These improved names reveal the variables’ purposes directly. Code, like any text, should be intuitive and readable.

If You Can’t Name It, You Don’t Understand It

If you struggle to name something, it’s likely because you don’t fully understand it yet. Naming variables often requires crystal-clear thinking about what the code is trying to accomplish, so unclear names often signal unclear ideas. If you find yourself reaching for vague terms, try asking, “What exactly is this variable representing?” This exercise helps you clarify your logic, which is beneficial not only for naming but for the overall structure of your code.

To help with this, try using a “descriptive placeholder” name, even if it’s excessively long. For instance, instead of trying to name a counter vaguely, use something like numberOfActiveUsersWhereXisTrue. This will both clarify the variable's purpose for now and signal for future refactoring to find a concise, precise name as the code becomes more defined.

Here are two JavaScript code examples that demonstrate how to improve variable names for better readability and maintainability:

Example 1: Poor Variable Names

In this example, we have ambiguous and non-descriptive names, making it hard to follow the code’s intent.

// Poor variable names
function calc(p, r) {
    let res = 0;
    for (let i = 0; i < r.length; i++) {
        res += r[i];
    }
    return res * (p/100);
}

let price = calc(100, [5, 10, 15]);

Explanation:

• calc does not indicate what this function actually calculates.
• p and r are not descriptive and don’t explain what values they represent.
• res is unclear and doesn’t indicate that it’s the result of the sum of the array.

Improved Example: Good Variable Names

Let’s rename the variables for clarity so that anyone reading the code can understand its purpose at a glance.

// Improved variable names
function calculateTotalPrice(basePrice, discounts) {
    let totalDiscount = 0;
    for (let discount of discounts) {
        totalDiscount += discount;
    }
    return basePrice * (totalDiscount/100);
}

let totalPrice = calculateTotalPrice(100, [5, 10, 15]);

Explanation:

• calculateTotalPrice clearly describes the purpose of the function.
• basePrice and discounts specify what values are being passed in.
• totalDiscount makes it clear that it’s the total sum of discounts from the array.

Example 2: Using Contextual Variable Names

Let’s look at a second example where the purpose of variables is unclear due to non-descriptive names.

// Poor variable names
function prsnData(d, a) {
    for (let v of a) {
        console.log(`${d}: ${v}`);
    }
}

let name = "Name";
let attributes = ["smart", "kind", "hardworking"];
prsnData(name, attributes);

Explanation:

• prsnData is unclear—does it mean person data or print data?
• d and a don’t describe the values they hold, making the function difficult to follow.

Improved Version:

// Improved variable names
function displayPersonAttributes(personName, attributes) {
    for (let attribute of attributes) {
        console.log(`${personName}: ${attribute}`);
    }
}

// Usage
let personName = "Name";
let attributes = ["smart", "kind", "hardworking"];
displayPersonAttributes(personName, attributes);

Explanation:

• displayPersonAttributes is clear and communicates the function’s purpose.
• personName and attributes indicate what each parameter represents, making the code easier to understand at a glance.

Using meaningful names greatly enhances readability and shows a careful, thoughtful approach to programming.

Characteristics of Good Variable Names

While good names vary by context, here are some principles to help make your naming conventions solid:

1. Be Descriptive but Concise: Names should convey purpose. For instance, instead of x, userAge is much clearer. At the same time, avoid overly long names that may become cumbersome. Strive for a balance where a variable name is as short as possible while still conveying its purpose. If you have trouble find a good variable name, use aforementioned "descriptive placeholder", and come back to it later.
2. Use Context: Variable names should fit the function or class they’re in. For instance, a variable in a function handling order data might use orderTotal or customerID rather than something generic like data or num.
3. Follow Naming Conventions: Many languages have specific naming conventions (like camelCase in JavaScript and snake_case in Python). These conventions keep code style consistent and make it easier to read across different projects.
4. Avoid Cryptic Abbreviations: Shortening words can lead to confusion, especially if the abbreviation isn’t universally recognized. A name like num may be clear enough, but cnt could confuse readers who don't know whether it stands for "count," "content," or something else.
5. Meaningful Prefixes and Suffixes: For certain data types or structures, adding a prefix can improve clarity. For example, use listOfUsers to indicate an array or list, or isEnabled to show that a variable is a boolean. These prefixes serve as quick cues about the variable's function and type.

Refactoring and Renaming When Necessary

As code evolves, so should variable names. It’s common to start with one name and later realize it no longer reflects the variable’s purpose accurately. If your variable’s name no longer aligns with its function, take the time to rename it. Many modern IDEs such as VSCode support refactor->rename features, which make renaming painless across large codebases.

Naming as a Skill to Build Over Time

Variable naming is a skill that improves with practice and attention. Here are a few strategies to strengthen your naming skills:

• Practice Mindfulness: When choosing a name, take a moment to consider how it reflects the variable’s role in the code.
• Review and Refine: As you revisit old code, critique your own variable names and improve them.
• Ask for Feedback: Code reviews are invaluable for learning from other perspectives. Peers can offer insights into alternative names that may be clearer.

Naming variables may sound trivial, but it’s one of the most telling signs of a programmer’s skill and thoughtfulness. A programmer who takes time to name variables thoughtfully is often the one who approaches problems methodically, communicates clearly, and cares about long-term maintainability.

About the Author

The author is a veteran web developer who created the popular PHP datagrid tool (phpgrid.com), harnessing the power of CRUD to make the world a better place — at least for developers looking to simplify their lives!

I’d like share a recent experiment that explores how to transform a plain, old-fashioned HTML table into a dynamic card view, going beyond the traditional rows and columns.

Start With a Simple HTML Table

Let’s begin with a simple HTML table such as the following.

<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>  
  <tr>
    <td>Alfreds </td>
    <td>Maria </td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro  </td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Alfreds </td>
    <td>Maria </td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial </td>
    <td>Francisco </td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Alfreds </td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial </td>
    <td>Francisco </td>
    <td>Mexico</td>
  </tr>
  </tbody>
</table>

It looks like this when rendered in browser.

Nothing fancy.

By definition, tables consist of rows and columns. How can we transform the traditional rows and columns layout into something more dynamic?

Discover the Power of CSS Grid

Tables don’t have to be boring. With a few simple CSS tricks, you can easily transform a traditional HTML table into a sleek list or card view.

The best part? No JavaScript, just pure CSS!

CSS grid has been an W3C Candidate Recommendation Draft since 2007, however, it has been adopted by the recent versions of all current major browsers.

CSS grid is designed for both rows and columns, making it ideal for complex layouts such as table. It allows you to manage both horizontal and vertical alignments simultaneously, which gives you much more control than Flexbox, which is primarily one-dimensional (row or column).

CSS Grid Properties to Use

1. Use CSS grid layout for <thead> and <tbody>.
2. Use CSS display property and set all <td> to be block elements

table tbody, table thead {
  display: grid;
}
table td {
  display: block;
}

With the CSS above, our plain HTML table already magically transforms into a responsive list view, displaying each record neatly in a single column.

It’s looking good but a bit chaotic! Let’s sprinkle on some CSS borders to give each row in our list a little breathing room.

table, th, tr {
  border: 1px solid black;
}

There you go. Check out the new look! Not too shabby for a list view created without a single line of JavaScript!

Now we got a nice list made from an old-fashioned html table, how do we turn that nice list into a card view?

Spoiler alert: just sprinkle on a few more lines of CSS!

Transform List into Card View

Our final card trick to transform table into cards is to use CSS grid property grid-template-columns:

table tbody {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

grid-template-columns is a CSS property used in the CSS Grid layout to define the structure of the grid's columns. It specifies the number of columns, their widths, and how the space within the grid is divided.

With the repeat() function, the first parameter lets us decide how many columns we want—let’s say 4, because who doesn’t love a nice round number? The second parameter tells those columns how big to be—1fr, or one fraction of the available space. It’s like giving your columns a little pep talk: 'You all get an equal slice of the space pie!'

Our final card view

Take a moment to explore the code and see the results for yourself over on CodePen. It’s the perfect place to experiment and play around with CSS grid transformations. You may even discover some fun surprises along the way.

Keep in mind that CSS Grid is also responsive, providing developers with enhanced control over how layouts adjust and reflow across various screen sizes and devices.

Optional: Adding data-label to card view

While the card view is visually appealing, it lacks the clarity of column information, leaving users to guess the data represented in each card.

By incorporating a touch of JavaScript, we can seamlessly add data labels for each column, enhancing the association between the labels and their corresponding cells.

// Store each column header to array
const labels = [];
document.querySelectorAll('table thead th').forEach(th => {
    labels.push(th.textContent);
});

// Add data-label attribute to each cell
document.querySelectorAll('table tbody tr').forEach(tr => {
    tr.querySelectorAll('td').forEach((td, column) => {
        td.setAttribute('data-label', labels[column]);
    });
});

It now looks like this

Demo

It’s nothing like the html table that we started with. With CSS Grid, the layout options are endless because it allows for full control over both rows and columns in a two-dimensional space.

Conclusion

This tutorial only scratches the surface of the iceberg. You can easily create more responsive layouts, overlap elements, span items across multiple rows or columns, and adjust grid areas dynamically, making it highly versatile for various layout needs.

Happy gridding!

About the Author

The author is a veteran web developer who created the popular PHP datagrid tool (phpgrid.com), harnessing the power of CRUD to make the world a better place — at least for developers looking to simplify their lives!

pythonGrid is a new free open-source library to create a fully working datagrid for CRUD (Create, Read, Update, & Delete) for Flask that connects to a relational database such as Postgres or MySql/MariaDB database.

It makes everyday datagrid tasks extremely easy. Standard functions like sorting, pagination, search, and CSV export are supported out-of-box without complicated programming.

pythonGrid does not require creating a separate data model for each database table.

It requires only two lines of code for a basic CRUD.

mygrid = PythonGrid('SELECT * FROM TABLE_NAME', 'PRIMARY_KEY', 'TABLE_NAME')
return render_template('template.html', title='a page title', grid=mygrid)

Yes! That’s it! It is because pythonGrid does not require declaring data models, nor need to manage table relationships. A database table name is all you need.

Quick Start

A couple of quick-start options are available:

• Download the latest release
• Clone the repo (recommended):

git clone https://github.com/pycr/pythongrid.git

Requirements

• pythonGrid
• Python 3.6
• Flask
• SQLAlchemy
• MySQL or Postgres

Files included

Within the download you will see something like this:

├── LICENSE
├── README.md
├── app
│   ├── __init__.py
│   ├── data.py
│   ├── grid.py
│   ├── export.py
│   ├── routes.py
│   ├── static
│   └── templates
│       ├── 404.html
│       ├── base.html
│       ├── grid.html
│       └── index.html
├── sample
│   ├── sampledb_postgres.sql
│   ├── sampledb_mysql.sql
├── config.py
├── index.py
└── requirements.txt

pythonGrid has three main files in grid.py, data.py, and export.py in app folder.

• grid.py is the main Python class that is responsible for creating the datagrid table. It's a high-level wrapper to jqGrid, a popular jQuery datagrid plugin, for rendering datagrid in the browser.
• data.py is a Python class that returns the data via AJAX to populate the grid from a database.
• export.py is responsible for handling the data export.
• static contains all of the client-side Javascript and CSS files used for rendering.

Creating the Database

Find the sample database in the folder sampledb. Using your favorite MySQL os Postgres client (more database supports are coming).

1. Create a new database named sampledb
2. Run the sample SQL script.

Install Python

First of all, if you don’t have Python installed on your computer, download and install it from the Python official website now.
To make sure your Python is functional, type python3 in a terminal window, or just python if that does not work. Here is what you should expect to see:

Python 3.6.3 (v3.6.3:2c5fed86e0, Oct  3 2017, 00:32:08)
[GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>>

Next, install the Flask framework.

Install Flask Framework via Virtual Environment

It is highly recommended to use Python virtual environment. A Python virtual environment is a self-contained separate copy of Python installation. Different applications can then use different virtual environments with a modified Python copy without worrying about system permissions.

The following command will create a virtual environment named venv stored in a directory, also called venv.

python3 -m venv venv

Activate the new virtual environment:

source venv/bin/activate

Now the terminal prompt is modified to include the name of the activated virtual environment

(venv) $ _

With a new virtual environment created and activated, finally, let’s install dependents:

Install Dependents

pythonGrid uses SQLAlchemy to support different types of databases.

pip install -r requirements.txt

Configuration

Find file config.py, and set the database connection properties according to your environment. The demo uses the MySQL database.

You can also use a socket to connect to your database without specifying a database hostname.

PYTHONGRID_DB_HOSTNAME = 'mysqldatabase.example.com'
PYTHONGRID_DB_NAME = 'sampledb'
PYTHONGRID_DB_USERNAME = 'root'
PYTHONGRID_DB_PASSWORD = 'root'
PYTHONGRID_DB_TYPE = 'mysql+pymysql'

For Postgres set database type to postgres+psycopg2

PYTHONGRID_DB_TYPE = 'postgres+psycopg2'

Initialize Grid

Flask uses view functions to handle application routes. View functions are mapped to one or more route URLs so that Flask knows what logic to execute when a client requests a given URL such as “https://example.com/grid".

We have three view functions that need initialization.

index()

The file routes.py contains our def index() view functions associate with root URL /. This means that when a web browser requests the URL, Flask invokes this function and passes the return value of it back to the browser as a response.

Inside the function, it creates a new instance of the PythonGrid class and assigns this object to the local variable grid. Note orders is a table from our sample database sampledb.

grid = PythonGrid('SELECT * FROM orders', 'orderNumber', 'orders')

PythonGrid initializer shown above requires 3 parameters:

1. A simple SQL SELECT statement
2. The database table primary key
3. The database table name

The view function pass the grid object into the rendered template from grid.html template.

return render_template('grid.html', title='GRID', grid=grid)

data()

Next, we need the data for the grid (thus the datagrid

In the next view function data(), we create a new instance for PythonGridDbData class that is responsible for retrieve data from the database to populate our datagrid.

PythonGridDbData class requires only 1 parameter, which should be the same SQL SELECT statement used for PythonGrid class.

data = PythonGridDbData('SELECT * FROM orders')
return data.getData()

export()

The export function is almost identical to the data function above except we need to use PythonGridDbExport to initiate a new instance for the export class.

exp = PythonGridDbExport('SELECT * FROM orders')
return exp.export()

Hello, Grid

At this point, we can run our program with the command below.

flask run

It should give you a beautiful datagrid with data from orders table.

A List of Common Datagrid Functions

From the basic grid, we can add new functions such as changing title, adding search, and enabling export, set text-align, etc., through simple function calls.

Datagrid Caption

grid.set_caption('Orders Table')

Column Title

grid.set_col_title('orderNumber', 'Order #')

Hide Columns

grid.set_col_hidden(['customerNumber, logTime, shippedDate, requiredDate'])

Set Page Size (# of rows to display per page)

grid.set_pagesize(20)

Set Datagrid Dimension (e.g. Width 800px, Height 400px)

grid.set_dimension(800, 400)

Enable Search

grid.enable_search(True)

Display Row Number

grid.enable_rownumbers(True)

Display Page Count on Toolbar

grid.enable_pagecount(True)

Column Text Align (e.g. Left, Center, or Right)

grid.set_col_align('status', 'center')

Set Column Width (e.g. 600px)

grid.set_col_width('comments', 600)

Enable CSV export

grid.enable_export()

See the list of complete pythonGrid documentation.

• Demo
• Project Homepage

Please stay tuned for the second part of the step-by-step walkthrough for the rest of CRUD operations, including Add, Edit, and Delete!

If you have any questions about this tutorial, feel free to comment below

I’ve been itching to write about this topic for some time now.

Believe it or not, everything is essentially CRUD on the internet. It is the hidden skeleton that supports all of our digital interactions.

What is CRUD?

First of all, let’s get the jargon out of the way. CRUD stands for Create, Read, Update, and Delete — the four basic operations performed on data in a database or application.

It’s not just about data entry forms or database management; CRUD operations are embedded in nearly every feature and action we perform in applications, including those that might seem more complex at first glance.

Let’s start with an example.

SAP is a massive CRUD

During my years in grad school, I had the pleasure (or displeasure) to use SAP ERP system The first time I launched SAP (back when it was still a Windows app), I was struck by its overwhelming number of datagrids. And not just a few — TONS of them, all intricately linked.

Imagine navigating through this cluttered interface — it’s a German product, after all!

Despite its chaotic appearance, SAP’s core is packed with datagrids. These datagrids with columns and rows are fundamentally tied to CRUD operations (Create, Read, Update, Delete). They ensure that managing vast amounts of data is both efficient and intuitive, thanks to CRUD’s reliable framework.

SAP has improved is UI over the years, but datagrid still play an essential role at its core.

When there is datagrid, there must be CRUD (Create, Read, Update, Delete).

HTTP verbs are CRUD

Now, let’s talk about something you might use every day without realizing its connection to CRUD — HTTP verbs.

HTTP verbs (or methods) GET, POST, PUT, DELETE, and PATCH are essentially aligned with CRUD operations because they map directly to the fundamental actions required to manage resources in a web application.

Here’s how each HTTP verb corresponds to CRUD:

1. GET → Read

• GET is used to retrieve data from a server, which corresponds to the Read operation in CRUD. For example, when you visit a webpage or query an API to fetch information, the server processes a GET request to retrieve and return the requested data.

2. POST → Create

• POST is used to send data to the server to create a new resource. This aligns with the Create operation in CRUD. For instance, submitting a form to create a new user account or adding a new item to a database typically involves a POST request.

3. PUT → Update

• PUT is used to update an existing resource on the server. This corresponds to the Update operation in CRUD. PUT requests typically involve sending the complete updated resource to the server, which then replaces the existing resource with the new version

4. DELETE → Delete

• DELETE is used to remove a resource from the server, which directly aligns with the Delete operation in CRUD. When a DELETE request is sent, the specified resource is removed from the server, reflecting the removal of a record in a database.

By designing HTTP verbs around CRUD concepts, web APIs can manage resources in a way that is both intuitive for developers and effective for data manipulation, maintaining consistency across different systems.

Not Convinced? Let’s Dig Deeper

You might be thinking, “Okay, there are lots of CRUDs, but does that really mean everything is CRUD?” You might argue that complex applications like Facebook or YouTube don’t fit into this model. Or do they?

Why Facebook is also just a CRUD

In 2016, Anatoly Lubarsky reverse-engineered Facebook’s database schema, revealing that at its core with user data is stored in relational databases, and CRUD operations manage and retrieve this data.

Whether it’s creating posts, reading news feeds, updating profiles, or deleting content, CRUD operations ensure data is consistently handled in the background, even as the complex processes remain invisible to the user.

Users interact with the platform by creating posts, reading news feeds, updating profiles, and deleting content, all of which are underpinned by CRUD operations that ensure the data is consistently stored, retrieved, and modified in the database, while the complex backend processes remain invisible to the user.

Let’s break it down:

1. FB User Login

• Read: When you log in to FB, the system reads (R) your input credentials (username and password) from the database to verify your identity.
• Update: The system might update (U) the last login timestamp or session information in the database once you’re authenticated.
• Create: If you log in for the first time or create a session, the system might create © a new session record.
• Delete: Old session data or failed login attempts might be deleted (D) as part of maintaining security.

2. Reading FB posts

• Read: Search operations are primarily about reading (R) data. When you search for something, the system queries the database and reads the relevant records that match your search criteria.
• Create/Update/Delete: Though less obvious, search engines also involve creating, updating, and deleting indexes in the background to ensure fast and accurate results. For instance, when new content is added or updated on a platform, search indexes are updated (U) or new entries are created ©. When content is removed, those indexes are deleted (D).

3. Updating Profile

• Updating profiles is a CRUD operation because it involves modifying existing data in the database. When a user changes their profile information, the system updates the corresponding record in the database

Still not convinced?

Let’s take a look at YouTube.

YouTube: A CRUD Classic

YouTube is actually a great example of a CRUD application. Here’s how YouTube fits into this model:

1. Create
   Uploading Videos: Users can create content by uploading videos. This involves adding a new video record to the YouTube database, including metadata like the title, description, tags, and thumbnail.
2. Read
   Watching Videos: The core functionality of YouTube is allowing users to read (consume) content. This involves retrieving video data from the database and streaming it to the user.
   Searching and Browsing: Users can search for videos, browse recommendations, and view playlists, all of which involve reading data from YouTube’s servers.
3. Update
   Editing Videos: Users can update the metadata of their videos, such as changing the title, description, or privacy settings.
   Managing Playlists: Users can update their playlists by adding or removing videos, changing the order, or editing the playlist title and description.
4. Delete
   Deleting Videos: Users can delete their videos, which removes the video and its associated data from YouTube’s database.
   Removing Content from Playlists: Users can also delete videos from playlists or remove entire playlists.

The Myth of Non-CRUD Operations

What I heard the most is that people would say, “My application has non-CRUD operations,” usually referring to complex functionalities that go beyond basic data management, such as real-time data processing, advanced analytics, complex business logic, or workflow automation, which involve more than just creating, reading, updating, or deleting records in a database.

Or are they?

CRUD in disguise

Datagrid is a CRUD, but not all CRUDs are datagrids. CRUD could have many forms and faces.

Even in situations involving complex functionalities like real-time data processing, advanced analytics, or workflow automation, CRUD operations are still essentially everywhere. These advanced features still rely on the underlying ability to create, read, update, or delete data as they interact with databases or data stores.

1. Real-Time Data Processing:

• In a real-time data system such as stock trading platform that processes real-time data, CRUD operations are still involved. For instance, the system creates new trade records when transactions occur, reads real-time market data to display to users, updates users’ portfolios with the latest values, and deletes outdated or canceled orders. While the processing might be complex, the data handling at its core is still CRUD-based.

2. Advanced Analytics:

• In a business intelligence tool that performs advanced analytics, CRUD operations are essential. The tool creates datasets based on user queries, reads large volumes of data from various sources, updates dashboards with the latest analysis results, and deletes outdated reports. The sophisticated algorithms and visualizations rely on CRUD to manage and display the underlying data effectively.

3. Workflow Automation:

• When you automate a workflow, what’s really happening? The system creates new tasks, reads existing data (because it’s nosy like that), updates the status as things move along, and deletes anything that’s done or obsolete, kind of like cleaning out your closet but with data instead of last season’s shoes. So no matter how complex or high-tech the automation gets, at its core, it’s just CRUD — on autopilot, and maybe with a little more flair.

4. Machine Learning Applications:

• In a machine learning platform, CRUD operations are involved in managing training datasets and model results. Even though machine learning is a mystical dance of algorithms and data, it’s still fueled by the trusty old CRUD operations — because even fancy AI models need their data served fresh, updated, and occasionally deleted.

Even though the applications may perform sophisticated tasks, add, read, update, delete operations are still the backbone of any data management system. CRUD remains essential to ensure that the application’s complex functionalities can operate effectively.

The list goes on and on.

Once You Spot CRUD, You’ll Start Seeing It Everywhere!

Once you understand how CRUD works, you’ll start recognizing its patterns in all kinds of software.

These four magic letters are so fundamental to data management, it quietly powers a wide variety of interactions — even ones that don’t seem obvious at first glance. The more familiar you are with this concept, the easier it becomes to see how deeply integrated it is in almost every digital system.

It’s like discovering the hidden building blocks behind the digital world.

All you need is CRUD!

About the Author

The author is a veteran web developer who created the popular PHP datagrid tool (phpgrid.com), harnessing the power of CRUD to make the world a better place — at least for developers looking to simplify their lives!

This is an expansion of the popular inventory management system tutorial, with Laravel 10, Bootstrap 5 integrated, as an out-of-box, and also customizable solution, can be used right away with little configuration.

The inventory management system includes features like inventory tracking, stock alerts, barcode scanning, purchase order management, sales order management, and report generation. With this system, you can easily manage your inventory, keep track of your stock levels, and ensure that you have the right amount of inventory on hand at all times.

In terms of the technology used, Laravel 10 provides a robust and secure back-end framework for handling the database and business logic, while Bootstrap allows for the creation of user-friendly front-end interfaces that are optimized for mobile devices.

System Requirements

Our Inventory System requires the standard commercial phpGrid and phpChart license as it needs a few advanced features from both components.

• PHP 8.1
• MySQL or MariaDB
• phpGrid 7+ (free or commercial)
• phpChart (for dashboard)

Inventory Management Components

• Incoming shipments
• Outgoing orders
• Inventory
• Suppliers
• Dashboard
• User Management
• User Profile
• User Register
• Sign In
• Sign Out

Database Diagram (updated 2023)

The new inventory system has added a category in addition to products, purchases, orders, and suppliers. Current inventory, or products on hand, is updated by tracking incoming shipments and outgoing orders. Order alerts can be set to trigger when inventory levels fall below custom-defined minimum levels.

Set up Database

The inventory management now has two separate databases, a inventory management database, and a Laravel framework database for user and session management.

Import Inventory Management Database

First of all, you’ll need to create a database for your inventory management system using InventoryManager.sql SQL script in the end of this tutorial. Execute the script using a MySQL tool such as MySQL Workbench. This will create a new database named InventoryManager.

Set up Laravel System Database

You will use Laravel’s built-in database migrations to create the necessary system tables and columns.

First of all, copy the following file

.env.example

to

.env

then updated the .env configurations (mainly the database configuration)

2. In your terminal run the following to create the database tables and seed the roles and users tables

php artisan key:generate
php artisan migrate --seed

Set up phpGrid

We will use a datagrid component by phpGrid to handle all internal database CRUD (Create, Remove, Update, and Delete) operations.

Download a copy of phpGrid (free or commercial)before you proceed.

To install phpGrid, follow these steps:

1. Unzip the phpGrid download file.
2. Upload the phpGrid folder to the phpGrid folder.
3. Complete the installation by configuring the conf.php file.

To set up conf.php, you can use those manual installation steps.

User Administration

User administration is included as part of the improved inventory management system. The system includes features for creating and deleting user accounts, assigning and revoking user permissions, and managing user roles and groups.

User Login

If you are not logged in you can only access this page or the Sign Up page. The default url takes you to the login page where you use the default credentials admin@admin.com with the password secret. Logging in is possible only with already existing credentials. For this to work you should have run the migrations.

New Users Sign-up

You can register as a user by filling in the name, email, role and password for your account. For your role you can choose between the Admin, Creator and Member. It is important to know that an admin user has access to all the pages and actions, can delete, add and edit another users, other roles, items, tags or categories; a creator user has accces to category, tag and item management, but can not add, edit or delete other users; a member user has access to the item management but can not take any action.

You can do this by accessing the sign up page from the “Sign Up” button in the top navbar or by clicking the “Sign Up” button from the bottom of the log in form. Another simple way is adding /register in the url.

Forgot Password

If a user forgets the account’s password it is possible to reset the password. For this the user should click on the “here” under the login form or add /login/forgot-password in the url.

User Profile

The profile can be accessed by a logged in user by clicking “User Profile” from the sidebar or adding /user-profile in the url. The user can add information like birthday, gender, phone number, location, language or skills.

User Management

This module allows administrators to manage user accounts and access permissions for a particular application or system. In addition to managing user accounts, user management can also be used to manage customer accounts, partners, and other types of users who need access to a particular application or system.

Dashboard

What is an inventory system good for without some of type of report? In this section, you will learn how to use phpChart — which seamlessly integrates with phpGrid — to create visually pleasing and useful reports for your Inventory Manager application.

Here’s what our dashboard:

Quick Stats

Admin

Instead of manually update supplier and category information in database directly in the past, the improved admin page added both Supplier Management and Category Management. More management admin can be added and customized in this section.

Supplier Management

Category Management

Inventory Administration

Products

Purchases

Current Orders

Barcodes

Summary

In conclusion, with Laravel 10, Bootstrap, and pair with phpGrid can easily build a powerful solution for businesses that want to streamline their inventory management processes, improve accuracy, and reduce costs associated with inventory management. It also can be extended and tailored to meet the specific needs of any business.

Hope you like this tutorial! Don’t forget to launch the live demo!

LAUNCH LIVE DEMO

Login name:
admin@admin.com

Password:
secret

Inventory Management with Dashboard, User Management in Laravel 10 & Bootstrap 5 was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.