How to code faster for beginners.

Speaking for myself, as a web development beginner, I love seeing results display on my screen. At times I care little about the behind the scenes, what is required to display a particular result on the web browser. That is where the problem begins.

To solve this problem, I have of late been asking myself a crucial question: do I have a knowledge gap or do I have an execution gap. In most cases, my answer is usually the former, since I am a beginner.

After answering the stated question, you will know how to proceed. If you have a knowledge gap, you need to dedicate a good amount of time learning the concept you want to execute before you go ahead and execute it.On the other hand, if you have an execution gap, go ahead and build the app. Lucky you!

I used this technique yesterday and today and I have made massive progress in a next js app I am currently building. Two weeks ago I knew nothing about next JS and tailwind. At the moment, I have built a website with map display and chat capability. It even has a dynamic header and footer. This to me is an achievement worth celebrating.

So the next time your project is progressing slower than usual and you have countless bugs in your code, ask yourself this question: do I have a knowledge gap or do I have an execution gap?. From there proceed accordingly.

Comments

[Karam Jameel Moore]

import { globSync } from 'glob';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

export default {
input: Object.fromEntries(
globSync('src/*/.js').map(file => [
// This remove src/ as well as the file extension from each
// file, so e.g. src/nested/foo.js becomes nested/foo
path.relative(
'src',
file.slice(0, file.length - path.extname(file).length)
),
// This expands the relative paths to absolute paths, so e.g.
// src/nested/foo becomes /project/src/nested/foo.js
fileURLToPath(new URL(file, import.meta.url))
])
),
output: {
format: 'es',
dir: 'dist'
}
};

[Karam Jameel Moore]

export default function myPlugin() {
const virtualModuleId = 'virtual:my-module'
const resolvedVirtualModuleId = '\0' + virtualModuleId

return {
name: 'my-plugin', // required, will show up in warnings and errors
resolveId(id) {
if (id === virtualModuleId) {
return resolvedVirtualModuleId
}
},
load(id) {
if (id === resolvedVirtualModuleId) {
return export const msg = "from virtual module"
}
}
}
}