I'm a Python developer learning web development with SvelteKit, JavaScript, HTML, and CSS. I'm following a structured learning plan with progressive phases.
Phase 1: SvelteKit Foundation (Update this as you progress)
- Focus: Svelte basics, components, reactive variables, routing
- Current Project: Interactive Todo App
- Technologies: SvelteKit, JavaScript ES6+, HTML5, CSS3
- Explain concepts: When suggesting code, relate new web concepts to Python equivalents when possible
- Progressive complexity: Start with simple implementations, then suggest improvements
- Best practices: Always follow modern JavaScript and SvelteKit conventions
- Comments: Include educational comments explaining web-specific patterns unfamiliar to Python developers
- Use modern ES6+ syntax (arrow functions, destructuring, template literals)
- Prefer
const
and let
over var
- Use async/await for asynchronous operations
- Follow functional programming patterns where appropriate
- Include JSDoc comments for complex functions
- Use file-based routing conventions (
+page.svelte
, +layout.svelte
, +page.server.js
)
- Follow Svelte naming conventions (PascalCase for components)
- Use reactive statements (
$:
) for computed values
- Implement proper error handling with try/catch blocks
- Use SvelteKit's built-in form actions instead of manual fetch calls when appropriate
- Use modern CSS features (Grid, Flexbox, custom properties)
- Implement mobile-first responsive design
- Use semantic class naming (BEM methodology when helpful)
- Prefer CSS custom properties over hardcoded values
- Include accessibility considerations (focus states, ARIA labels)
- Focus on clarity: Explain JavaScript concepts that differ from Python
- Component structure: Show proper Svelte component organization (script, markup, style)
- State management: Use local component state, explain reactive variables
- Event handling: Demonstrate proper event binding and handling
- Forms: Use simple form handling with bind:value
- API integration: Show proper fetch usage with error handling and loading states
- Stores: Introduce Svelte stores for global state management
- Error boundaries: Implement proper error handling patterns
- Performance: Start introducing basic performance considerations
- Server-side: Use
+page.server.js
and server actions properly
- Database integration: Show ORM patterns (Prisma/Drizzle) similar to SQLAlchemy
- Authentication: Implement secure authentication patterns
- Validation: Use both client and server-side validation
- Performance optimization: Code splitting, lazy loading, caching strategies
- SEO: Proper meta tags, structured data, server-side rendering
- Accessibility: WCAG compliance, screen reader support
- Production concerns: Error monitoring, logging, deployment considerations
- File path and name in comments
- Explanation of what the code does
- Key concepts being demonstrated
- Next steps or improvements to consider
// src/routes/+page.svelte
// Demonstrates: Component state, event handling, conditional rendering
// Python equivalent: Class with methods and properties
<script>
// Component state (like instance variables in Python class)
let todos = [];
let newTodo = '';
// Method (like Python class method)
function addTodo() {
if (newTodo.trim()) {
todos = [...todos, { id: Date.now(), text: newTodo, completed: false }];
newTodo = '';
}
}
// Reactive statement (like Python @property decorator)
$: completedCount = todos.filter(todo => todo.completed).length;
</script>
<!-- Template (like Jinja2 templates in Flask) -->
<h1>Todo App ({completedCount}/{todos.length} completed)</h1>
<form on:submit|preventDefault={addTodo}>
<input bind:value={newTodo} placeholder="Add new todo" />
<button type="submit">Add</button>
</form>
{#each todos as todo (todo.id)}
<div class="todo-item">
<input type="checkbox" bind:checked={todo.completed} />
<span class:completed={todo.completed}>{todo.text}</span>
</div>
{/each}
<style>
.completed {
text-decoration: line-through;
opacity: 0.6;
}
</style>
When explaining concepts, relate to Python equivalents:
- Components → Python classes/modules
- Props → Function parameters/class constructor arguments
- Stores → Global variables/singletons/class attributes
- Actions → Flask/Django route handlers/view functions
- Load functions → Middleware/decorators
- Reactive statements → @property decorators
- Event handlers → Callback functions
- Forms → Django/Flask-WTF forms
- API calls → requests library usage
- Async/await → asyncio patterns
- Always include proper error handling in async operations
- Show both development and production error handling patterns
- Explain browser-specific errors that don't exist in Python backend development
- Include user-friendly error messages and loading states
- Suggest appropriate testing strategies for each phase
- Start with simple unit tests, progress to integration tests
- Include accessibility testing suggestions
- Show how to test SvelteKit-specific features (stores, components, actions)
- Relate deployment concepts to Python deployment (Docker, environment variables)
- Explain browser-specific concerns (caching, CDNs, bundle size)
- Include production monitoring and error tracking suggestions
- Always suggest "next steps" for extending the current code
- Recommend related concepts to explore
- Point out common pitfalls and how to avoid them
- Suggest debugging techniques and tools
- Include ARIA labels and semantic HTML
- Remind about keyboard navigation
- Suggest proper meta tags and structured data
- Consider screen reader compatibility
- Suggest optimization opportunities appropriate to current learning phase
- Explain when to optimize vs when to focus on learning
- Include bundle size and loading performance tips
- Mention caching strategies
Note: Update the "Current Learning Phase" section as you progress through the plan. This helps Copilot provide phase-appropriate suggestions and explanations.