Things I've worked on/completed since my last post…
I completed the To-do project!

codecara.github.io




Issues I had…
I noticed that some of my buttons were not firing on the first click and tried to figure this out using the debugger, but the problem was not clear to me. I had encountered this problem earlier in the course but could not remember how to fix it. In the end, it was because I was attaching the event listener to each individual button. I fixed this by attaching the event listener to document.I then has another event listener issue - an event that was firing on first button click, but only only firing after two clicks after that. I literally went through it line by line and saw an error in my if/else conditions and managed to fix it.I noticed another problem where is a task was entered without a date. After some testing, I realised that this was because some tasks were being saved to the data object even when no date had been entered, which then caused a ‘read error’ when date-fns was trying to read data from the data object. I ended up putting conditions in placed to prevent this from happening and implemented a modal pop-up error when the date field was empty.I had an issue trying to align a checkbox with a label which proved to not be as obvious to fix as I expected. I decided to leave it and move on. I may try to fix it later, but I will decide then if it’s worth the time investment. The CSS I implemented was to a satisfactory level, but I did not put much thought into it after that.Just as about to deploy, a bunch of errors started appearing - the last thing I would have wanted to happen. I just had to go through the debugger and realised I had deleted unused parameters from a function definition, but forgot to the delete the corresponding parameters in the function call, which messed everything up. Fortunately, I fixed it.


Things that went well...
I managed to fix all of these issues without any external help, excluding Mr. Google. In fact, I made myself solve the vast majority of problems I encountered in this project, which was very satisfying.*I finished the To-do list on 8th March 2025! *


Things I've learnt/need to improve on...
I should possibly think about refactoring bits of code as I build instead of leaving it all to the end.I’ve learned that it is possible to do To-do - it just may take a while!I need to improve my consistency with git commits.


Other…
I decided not to do any refactoring, but spent some time looking at other people’s solutions. I also plan to scan the study material in the build-up to the project, to see how many of the principles I actually managed to incorporate into it. It gets to the point where you’re just trying to get something working - for me at least. I did try to structure it in a somewhat appropriate way, but was advised by someone to just keep one file with variables and another with logic and to keep data and the DOM separate - I accomplished that at least.I am proud to have finished this project and amazed that I didn’t give up at certain points - I guess this means I have developed some of the famous ‘grit’.


Plan for the forthcoming week...
I will be continuing on with the JS course - ESLint.

Introduction
Starting in web development can feel overwhelming with so many frameworks, languages, and technologies available. Many beginners struggle with choosing the right stack to start with.The best way to begin is not by diving into complex frameworks but by following a structured approach. Vue.js and Laravel stand out as the most beginner-friendly choices for frontend and backend development. In this guide, we’ll explore why learning Vue.js and Laravel first is the best approach, and provide an optimized roadmap to becoming a full-stack developer.


? Step 1: Learn Programming Fundamentals (1–2 months)
✅ Pick Python (beginner-friendly) or JavaScript (since you’ll use it for web development).
✅ Focus on logic, problem-solving, and algorithms.
✅ Do basic Data Structures Algorithms (DSA) like lists, arrays, loops, functions, and recursion.
✅ Avoid diving into frameworks too soon—understand the core of programming first.Why?
? Strong programming fundamentals make any framework easy to pick up later.


? Step 2: Learn Web Basics (1–2 months)
✅ Learn HTML CSS – just enough to structure web pages.
✅ Learn JavaScript basics (ES6+ features, fetch API, async/await, DOM manipulation).
✅ Skip jQuery – focus on modern JavaScript.
✅ No need to master Bootstrap/Tailwind yet – focus on raw CSS Flexbox first.Why?
? Many beginners waste time trying to master CSS and JS before even touching a framework. Avoid that trap and move forward quickly.


? Step 3: Start with Vue.js Laravel (3–4 months)



Frontend: Vue.js
✅ Learn Vue.js fundamentals → Components, Props, Events, Vue Router.
✅ Build small projects like a simple to-do list, notes app, or a weather app.
✅ Understand how to manage state using Vue’s Composition API or Pinia.


Backend: Laravel
✅ Learn Laravel fundamentals → Migrations, Controllers, Routes, Middleware.
✅ Understand how Eloquent ORM works for handling databases.
✅ Build a small full-stack project using Vue.js and Laravel.? Why Vue.js First?

Simpler than React but still powerful.

Less boilerplate → Easy to build projects quickly.

Great combination with Laravel → Many jobs use Vue.js with Laravel.
? Why Laravel First?

Easiest backend framework for beginners.

Built-in authentication, routing, migrations = No headache.

Eloquent ORM makes database handling very simple.



? Step 4: Add TypeScript API Handling (1 month)
✅ Learn TypeScript basics and apply it in Vue.js.
✅ Learn REST APIs (fetching data, authentication, middleware).
✅ Learn Axios (for better API handling).
✅ Build a Vue.js app with TypeScript and API integration.? Why TypeScript after Vue Laravel?
TypeScript alone is confusing, but once you're comfortable with Vue, it's easy.
It helps avoid bugs scales better for large apps.
Many Vue Next.js jobs require TypeScript now.



? Step 5: Move to Advanced Frontend Backend Choices (Optional, 2–3 months)



If frontend-focused:
✅ Learn Next.js (React framework with SSR).
✅ Learn Nuxt.js (Vue alternative to Next.js).


If backend-focused:
✅ Learn Node.js (Express.js or NestJS) → If you want a JavaScript-based backend.
✅ Learn Golang/.NET → If you're aiming for high-performance apps or enterprise jobs.? Why Next.js before .NET?
It helps understand structured frameworks before jumping into more complex backends like .NET.



⚡ Step 6: Pick Your Direction (Job Ready!)
At this point, you can specialize in:
1️⃣ Full-stack Vue.js + Laravel developer → Start applying for jobs.
2️⃣ Frontend specialist → Move to Next.js, Nuxt.js, and advanced Vue concepts.
3️⃣ Backend specialist → Learn Golang, .NET, or Ruby on Rails.
4️⃣ DevOps Cloud → Learn Docker, AWS, and CI/CD pipelines.


? Why Vue.js Laravel Are the Best Starting Point?
1️⃣ Beginner-friendly – Easier to learn than React, Angular, or .NET.
2️⃣ Quick development – Laravel has built-in authentication, routing, migrations.
3️⃣ Less boilerplate – Vue is simpler than React, making UI development smooth.
4️⃣ Huge demand – Many full-stack jobs use Vue.js with Laravel.
5️⃣ Scalability – Vue + Laravel are great for both small and large projects.


? Final Thoughts: Best Roadmap to Web Development
Your original approach may have been great, but this version is even more structured for quick learning and job readiness.? If you're serious about web development, start with Vue.js Laravel. It will make everything else easier later!? What do you think? Would you tweak anything further? Let’s discuss in the comments!

When building with Supabase, Postgres Views can be a powerful tool for simplifying complex queries. But they come with a critical security consideration that isn't immediately obvious: Views bypass Row Level Security (RLS) by default, potentially exposing sensitive data even when your tables are properly secured.As a reminder: RLS is what allows you to safely query your Supabase database directly from the frontend, without routing through your backend server. But if RLS isn't working on a table, that table is like your phone screen on public transport—anyone who wants to take a glance, can.


The Security Challenge
Even if you've carefully configured RLS policies on your tables, views can create an unintended backdoor because:
By default, views don’t use RLS
Supabase's RLS policies page doesn't show or warn about exposed views (last checked 09.03.2025)
Views don't support RLS in the same way tables do



Testing Your View's Security
Before deploying any view to production, it's crucial to verify that it properly respects your RLS policies. Here's a quick way to test if your view is secure:
⛶// First, sign in as a specific user
// Then try to fetch ALL rows from your view
const { data } = await supabase.from('my_view').select('*')
// If your view respects RLS, you should only see rows this user has permission to access.
// If you see ALL rows, your view is bypassing RLS! ?
console.log("view response" ,data)


Securing Your Views
To protect your data, you have several options:
For Postgres 15+:

⛶CREATE VIEW public.my_view
WITH (security_invoker = true) AS
SELECT * FROM my_table;This applies the RLS of my_table to the view you’re creating.
For older Postgres versions:

Create an internal schema: CREATE SCHEMA internal;

Re-create the sensitive view in the internal schema
Delete the public version of the view



When to Use Views
Views are particularly valuable when you need to:
Simplify complex queries that you use frequently
Add computed columns that can't be generated columns
Create virtual tables that recalculate with each request



Example: Active Subscription Status
I recently built a subscription system and wanted to avoid having to write active_until NOW() in every query where I'd need to check for active subscriptions. Planning ahead, I first considered adding an is_active generated column to the table. But I hit a wall: Postgres doesn't allow volatile functions like now() in generated columns. That's when I turned to views as a solution:
⛶CREATE VIEW public.active_subscriptions
WITH (security_invoker = true) AS
SELECT
*,
(active_until now()) AS is_active
FROM
public.subscriptions;This view has been working perfectly, giving me clean queries while maintaining security through security_invoker.