Forem: Pelle Nilsen

What does CORS really do? 🤔

Pelle Nilsen — Wed, 30 Oct 2024 14:22:13 +0000

The Same-Origin Policy Problem 🔒
Enter CORS: The Security Guard 💂
Common CORS Headers Explained 📋
Quick Node.js/Express Implementation 🛠️
Common CORS Gotchas 🎯
Best Practices 🌟
Conclusion 🎬

CORS (Cross-Origin Resource Sharing) is often misunderstood as just another security headache for developers. Let's break down what it actually does and why it's crucial for web security.

The Same-Origin Policy Problem 🔒

Imagine you're at app1.com and your JavaScript code tries to fetch data from app2.com. Without CORS, this request would be blocked by the browser's same-origin policy. This policy prevents a malicious website from reading sensitive data from another website - like your banking details or private messages.

Enter CORS: The Security Guard 💂

CORS acts like a security guard that allows controlled access between different domains. Here's how it works:

The Request: Your frontend code makes a request to a different domain:

// Frontend at app1.com
fetch('http://api.app2.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
});

The Preflight: For certain requests, the browser first sends an OPTIONS request to check if the actual request is allowed:

OPTIONS /data HTTP/1.1
Host: api.app2.com
Origin: https://app1.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type

The Permission: The server responds with what's allowed:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app1.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

Common CORS Headers Explained 📋

Access-Control-Allow-Origin: Who can access the resource
- * means everyone (use cautiously‼️)
- https://app1.com means only that specific domain
Access-Control-Allow-Methods: Allowed HTTP methods
- Example: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Allowed request headers
- Example: Content-Type, Authorization
Access-Control-Max-Age: How long to cache preflight results
- Example: 86400 (24 hours)

Quick Node.js/Express Implementation 🛠️

Here's how to implement CORS in a Node.js/Express server:

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://app1.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    // Handle preflight
    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }
    next();
});

// Or use the cors package
const cors = require('cors');
app.use(cors({
    origin: 'https://app1.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization']
}));

Common CORS Gotchas 🎯

Credentials: If you're sending cookies or auth headers, you need:

// Frontend
fetch(url, {
    credentials: 'include'
});

// Backend
res.header('Access-Control-Allow-Credentials', 'true');

Wildcard Limitations: You can't use * with credentials

// This won't work with credentials
res.header('Access-Control-Allow-Origin', '*');

// Use specific origins instead
res.header('Access-Control-Allow-Origin', 'https://app1.com');

Best Practices 🌟

Be Specific: Avoid using * for Access-Control-Allow-Origin
Limit Methods: Only allow necessary HTTP methods
Cache Preflights: Set appropriate Access-Control-Max-Age
Secure Credentials: Be extra careful when allowing credentials
Validate Origins: Maintain a whitelist of allowed domains

Conclusion 🎬

CORS isn't just a barrier - it's a crucial security feature that protects users while enabling controlled cross-origin communication. Understanding how it works helps you implement it correctly and debug issues more effectively.

Remember: CORS is enforced by browsers, not servers. Server-to-server communication doesn't use CORS, so make sure to implement proper security measures for those scenarios.

TrackFlix: From Idea to Reality - A Subscription Tracking Revolution

Pelle Nilsen — Wed, 02 Oct 2024 12:02:15 +0000

Try TrackFlix today and start optimizing your subscriptions!

Introduction

In today's digital age, subscription-based services have become an integral part of our lives. From streaming platforms to productivity tools, managing multiple subscriptions can be a daunting task. Enter TrackFlix, a comprehensive subscription tracking application designed to help users stay on top of their recurring expenses. In this blog post, I'll take you through the journey of TrackFlix, from its inception to its current feature-rich state.

The Spark of an Idea

The idea for TrackFlix was born out of a common frustration: the inability to keep track of numerous subscriptions. I was never able to keep track of my subscriptions. Never knew how much I wasted on un-used subscriptions, I just knew that I lost money. This realization sparked the desire to create a tool that would help people regain control over their subscription expenses and eliminate wasteful spending on unused services.

Development Journey

The journey from concept to a fully-functional application was surprisinly swift. It took just one week to develop the completed app, showcasing the power of modern web development tools and frameworks. However, this rapid development didn't come without its challenges.

The primary hurdle was designing an intuitive user interface. As I explained, "The challenge was trying to figure out how to make it easy to navigate and keep track of your subscriptions, so it was easy for users to use." This focus on user experience drove many of the design decisions and features that make TrackFlix stand out.

Try TrackFlix today and start optimizing your subscriptions!

Key Features of TrackFlix

1. Intuitive Calendar View

At the heart of TrackFlix is a user-friendly calendar interface that provides a visual representation of all your subscriptions. This feature allows users to:

Quickly identify upcoming payments
View subscription details at a glance
Navigate through months and years effortlessly

2. Comprehensive Subscription Management

TrackFlix offers a robust system for managing subscriptions:

Add new subscriptions with detailed information
Edit existing subscriptions
Set reminders for upcoming payments
Categorize subscriptions for better organization

3. Financial Insights

To help users understand their spending habits, TrackFlix provides:

Monthly spending overview
Total paid amount over time
Spending breakdown by category

4. Multi-Currency Support

Recognizing the global nature of subscriptions, TrackFlix supports multiple currencies, allowing users to:

Switch between different currencies (EUR, USD, GBP, NOK, INR, JPY)
View all financial data in their preferred currency

5. Pre-implemented Subscription Logos

To enhance user experience and speed up the subscription addition process, TrackFlix includes:

A dropdown menu with pre-implemented logos for popular services
Automatic population of subscription names when selecting a logo

Try TrackFlix today and start optimizing your subscriptions!

Technical Implementation

TrackFlix is built using modern web technologies to ensure a smooth and responsive user experience:

Frontend: React.js with hooks for state management
Styling: Tailwind CSS for a sleek, customizable UI
Data Persistence: Local storage for saving user data
Date Handling: Native JavaScript Date object for managing subscription dates and reminders

User Feedback and Continuous Improvement

After publishing TrackFlix on the JSM Discord server, I received valueable feedback from the community. Users appriciated the app but suggested some improvements, such as:

Pre-installed logos for popular subscription services
A mobile-friendly view for on-the-go subscription management These suggestions were quickly incorporated into the app, demonstrating TrackFlix's commitment to user-driven development and continuous improvement.

Try TrackFlix today and start optimizing your subscriptions!

Future Roadmap

While TrackFlix already offers a comprehensive set of features, I'm constantly looking to improve and expand. Some exciting future enhancements include:

Family sharing as a paid plan, allowing multiple users to manage shared subscriptions
Money-saving tips to help users optimize their subscription spending
An advanced analyzer that evaluates your subscriptions and suggests cheaper alternatives
Data visualization with charts and graphs
Budget setting and alerts
Payment method tracking
Import/export functionality for data portability
Dark/light mode toggle for user preference
Integration with banking APIs for automatic subscription detection These planned features aim to make TrackFlix not just a tracking tool, but a comprehensive subscription management and optimization platform.

Conclusion

TrackFlix has evolved from a simple idea to a powerful tool for managing subscription expenses in just one week. By combining intuitive design with robust functionality, it addresses a common pain point in our ever increasing subscription-based world. The rapid development and incorporation of user feedback demonstrate the agility and user-centric approach behind TrackFlix.

As I continue to refine and expand TrackFlix, I remain commited to my goal of helping users take control of their digital subscriptions and make informed financial decisions. The planned features, especially the family sharing option and money-saving analyzer, promise to take subscription management to the next level.

I invite you to try TrackFlix and experience the ease of subscription management for yourself. Your feedback and suggestions are invalueable as I work to make TrackFlix even better.

Thank you for joining me on this journey, and here's to a future of smarter subscription management!

Try TrackFlix today and start optimizing your subscriptions!

How to Use CSS Properly: Best Practices for Clean and Efficient Styling

Pelle Nilsen — Sun, 29 Sep 2024 14:43:31 +0000

Cascading Style Sheets (CSS) is a fundamental technology in web development, allowing designers and developers to create visually appealing and responsive websites. However, without proper usage, CSS can quickly become unwieldy and difficult to maintain. In this article, we'll explore best practices for using CSS effectively, ensuring your stylesheets remain clean, efficient, and scalable.

What is CSS?

CSS (Cascading Style Sheets) is a styling language used to describe the presentation of a document written in HTML or XML. It defines how elements should be displayed on screen, on paper, or in other media.

Characteristics of Good CSS

Organized and Structured

Good CSS is well-organized and follows a logical structure. This makes it easier to navigate, understand, and maintain.

Example:

/* Good CSS structure */
/* Base styles */
body { ... }
h1, h2, h3 { ... }

/* Layout */
.container { ... }
.header { ... }
.main-content { ... }

/* Components */
.button { ... }
.card { ... }

/* Utilities */
.text-center { ... }
.m-2 { ... }

Follows a Naming Convention

Consistent naming conventions, such as BEM (Block Element Modifier) or SMACSS, help create more readable and maintainable CSS.

Example:

/* Using BEM naming convention */
.card { ... }
.card__title { ... }
.card__content { ... }
.card--featured { ... }

Utilizes CSS Preprocessing

CSS preprocessors like Sass or Less allow for more powerful and efficient styling through features like variables, nesting, and mixins.

Example:

// Sass variables and nesting
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Responsive and Flexible

Good CSS is designed to be responsive, adapting to different screen sizes and devices.

Example:

/* Responsive design using media queries */
.container {
  width: 100%;
  max-width: 1200px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

Optimized for Performance

Efficient CSS minimizes redundancy and prioritizes performance.

/* Optimized CSS */
.button {
  /* Use shorthand properties */
  margin: 10px 5px;
  /* Avoid expensive properties when possible */
  border-radius: 3px;
}

Characteristics of Bad CSS

Overly Specific Selectors

Highly specific selectors can lead to specificity issues and make your CSS harder to maintain.

Example:

/* Bad: Overly specific */
body div.container ul li a.link { ... }

/* Better: More general */
.nav-link { ... }

Repetitive Code

Repeating the same styles across multiple selectors leads to bloated stylesheets.

Example:

/* Bad: Repetitive */
.header { font-size: 16px; color: #333; }
.footer { font-size: 16px; color: #333; }

/* Better: Use a common class */
.text-default { font-size: 16px; color: #333; }

Inline Styles

Overuse of inline styles makes it difficult to maintain consistency and override styles when needed.

Example:

<!-- Bad: Inline styles -->
<div style="margin: 10px; padding: 5px; background-color: #f0f0f0;">...</div>

<!-- Better: Use classes -->
<div class="box">...</div>

!important Overuse

Relying on !important to solve specificity issues can lead to a cascade of overrides.

Example:

/* Bad: Overusing !important */
.button {
  background-color: blue !important;
  color: white !important;
}

/* Better: Use more specific selectors or restructure your CSS */
.primary-button {
  background-color: blue;
  color: white;
}

Lack of Comments

CSS without comments can be difficult to understand, especially for large projects or when working in teams.

Best Practices for Using CSS Properly

Use a CSS Methodology: Adopt a methodology like BEM, SMACSS, or OOCSS to organize your CSS and improve maintainability.
Leverage CSS Preprocessors: Use Sass or Less to write more efficient and powerful CSS.
Implement a Style Guide: Create and maintain a style guide to ensure consistency across your project.
Optimize for Performance: Minimize CSS files, use shorthand properties, and avoid unnecessary selectors.
Write Mobile-First CSS: Start with styles for mobile devices and use media queries to enhance for larger screens.
Use CSS Custom Properties: Leverage CSS variables for more flexible and maintainable stylesheets.
Avoid Deep Nesting: Keep your CSS selectors shallow to improve performance and reduce specificity issues.
Comment Your Code: Add meaningful comments to explain complex selectors or hacks.
Use a CSS Linter: Tools like StyleLint can help catch errors and enforce consistent coding styles.
Keep Learning: CSS is constantly evolving. Stay updated with new features and best practices.

Conclusion

Using CSS properly is crucial for creating maintainable, efficient, and scalable web applications. By following these best practices, you can write cleaner CSS that's easier to understand, modify, and scale. Remember, good CSS not only makes your websites look great but also contributes to better performance and developer experience. Happy styling!

API Design and Development: Best practices for creating robust and scalable APIs.

Pelle Nilsen — Fri, 20 Sep 2024 06:47:57 +0000

In the ever-evolving landscape of software development, APIs (Application Programming Interfaces) have become the backbone of modern applications. They enable seamless communication between different systems, allowing developers to build complex, interconnected solutions. However, creating an API that is both robust and scalable requires careful planning and adherence to best practices. In this article, we'll explore the key principles and strategies for designing and developing APIs that stand the test of time.

What is an API?

Before diving into best practices, let's quickly define what an API is. An API is a set of protocols, routines and tools for building software applications. It specifies how software components should interact, allowing different applications to communicate with each other effectively.

Characteristics of a Good API

Clear and Consistent Naming Conventions

A good API uses clear, consistent and intuitive naming conventions for endpoints, parameters and responses.

Example:

# Good API endpoint
GET /users/{id}

# Bad API endpoint
GET /get_user_data?user_id={id}

Proper Use of HTTP Methods

Utilize HTTP methods correctly to represent the action being performed on the resource.

Example:

# Good usage of HTTP methods
GET /articles (Retrieve all articles)
POST /articles (Create a new article)
PUT /articles/{id} (Update an entire article)
PATCH /articles/{id} (Partially update an article)
DELETE /articles/{id} (Delete an article)

# Bad usage
GET /create_article
POST /update_article

Versioning

Implement versioning to maintain backward compatibility while allowing for future improvements.

Example:

# Good versioning
https://api.example.com/v1/users

# Alternative versioning (in header)
Accept: application/vnd.example.v2+json

Proper Error Handling

Provide meaningful error messages and appropriate HTTP status codes.

Example:

{
  "error": {
    "code": 404,
    "message": "User not found",
    "details": "No user exists with the ID 12345"
  }
}

Pagination

Implement pagination for endpoints that return large datasets to improve performance and usability.

Example:

GET /articles?page=2&limit=20

Characteristics of a Bad API

Inconsistent Design

An API with inconsistent naming conventions, response formats or error handling can be confusing and difficult to use.

Example:

# Inconsistent naming (Bad practice)
GET /users
GET /fetch-articles
GET /products_list

Lack of Documentation

Poor or missing documentation makes it challenging for developers to understand and integrate with the API.

Overexposing Internal Details

Exposing too much of the internal system structure or implementation details can make the API brittle and hard to maintain.

Ignoring Security Best Practices

Failing to implement proper authentication, authorization and data validation can lead to security vulnerabilities.

Poor Performance

APIs that are slow, unoptimized or prone to rate limiting issues can frustrate users and limit adoption.

Best Practices for API Design and Development

Design with the Consumer in Mind

Always consider the needs and expectations of the API consumers when designing endpoints and response structures.

Use RESTful Principles

Follow RESTful principles for a standardized approach to API design, making your API intuitive and easy to use.

Implement Proper Authentication and Authorization

Secure your API using industry-standard authentication methods (e.g., OAuth 2.0, JWT) and implement fine-grained authorization.

Example:

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Provide Comprehensive Documentation

Create detailed, up-to-date documentation that includes examples, explanations of all endpoints, parameters and possible responses.

Use HTTPS

Always use HTTPS to ensure secure communication between clients and your API.

Implement Rate Limiting

Protect your API from abuse and ensure fair usage by implementing rate limiting.

Example response header:

X-RateLimit-Limit: 100
X-RateLimit-Remaining: 75
X-RateLimit-Reset: 1623423896

Design for Scalability

Consider caching strategies, database optimizations and horizontal scaling capabilities from the outset.

Implement Monitoring and Logging

Set up comprehensive monitoring and logging to track API usage, performance metrics, and potential issues.

Use Content Negotiation

Support multiple response formats (e.g., JSON, XML) through content negotiation.

Example:

Accept: application/json

Provide a Sandbox Environment

Offer a sandbox or staging environment for developers to test integrations without affecting production data.

Conclusion

Designing and developing a robust, scalable API requires careful planning and adherence to best practices. By following these guidelines, you can create APIs that are easy to use, maintain and scale. Remember that good API design is an iterative process – continually gather feedback from your users and be prepared to evolve your API over time.

Whether you're building a public API for third-party developers or an internal API for your microservices architecture, these best practices will help ensure your API stands the test of time and meets the needs of its consumers. Happy API designing!

How I Won the JSM Programming Challenge

Pelle Nilsen — Thu, 19 Sep 2024 15:18:14 +0000

In the vast universe of programming challenges, the JSM Programming Challenge stands out as a stellar opportunity for developers to showcase their skills and creativity. Last month's theme, "Video Games", set the stage for an exciting competition that pushed participants to explore new frontiers in game development. In this blog post, I'll share my journey of how I created "Cosmic Explorer", the game that ultimately led me to victory in this interstellar coding adventure.

Game: Cosmic Explorer
Code: GitHub

The Challenge: A Universe of Possibilities

The JSM Programming Challenge presented participants with a broad theme: "Video Games". We had the freedom to create a video game from scratch, utilize a game API, or even build a fan page for an existing game. The possibilities were as endless as the cosmos itself.

Choosing My Path: The Birth of Cosmic Explorer

After some brainstorming sessions with my girlfriend (who, spoiler alert, became my secret weapon in this challenge), we decided to embark on creating a space-based game. Thus, "Cosmic Explorer" was born - a game centered around space exploration, resource gathering from distant planets and battling enemy ships.

Preparing for the Journey: Learning Phaser

One of the most crucial decisions I made was choosing Phaser as my game development library. Despite never having created a web game before, I was drawn to Phaser's capabilities and decided to take the plunge. This decision set the stage for both my greatest challenge and my most significant learning experience during the competition.

// Example of initializing a Phaser game
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

The Toughest Asteroid Field: Mastering Phaser

Learning Phaser while simultaneously developing a game was like navigating through an asteroid field at warp speed. The learning curve was steep, and at times, it felt like I was lost in space. However, as I progressed, things began to click into place. My code might have resembled spaghetti more than a neat star chart, but it got the job done.

// Example of adding a sprite in Phaser
function create() {
    this.add.image(400, 300, 'sky');
    this.player = this.physics.add.sprite(100, 450, 'player');
    this.player.setCollideWorldBounds(true);
}

Unexpected Nebulae: Fierce Competition

The challenge lasted for 24 days, thought I embarked on my journey 5 days after the initial launch. Throughout this time, I approached the development of Cosmic Explorer with a relaxed attitude. I worked on it when I felt inspired and took breaks when I needed to. This approach kept the process enjoyable and prevented burnout.

New Constellations: Learning and Growth

Through this challenge, I discovered a new constellation in my programming toolkit - Phaser. Learning to use this library opened up a whole new galaxy of possibilities in game development that I hadn't explored before.

The Winning Formula: Nostalgia and Smooth Gameplay

I believe what set Cosmic Explorer apart was its blend of nostalgia-inducing pixel art (which my amazing girlfriend made all of, and sure made me win) and modern gameplay elements. The parallax star background created an immersive experience, while the movement system received praise from many players. The retro-inspired sound effects added another layer of charm that resonated with the judges and players alike.

// Example of creating a parallax background
function create() {
    this.bg1 = this.add.tileSprite(0, 0, config.width, config.height, 'background1').setOrigin(0, 0);
    this.bg2 = this.add.tileSprite(0, 0, config.width, config.height, 'background2').setOrigin(0, 0);
}

function update() {
    this.bg1.tilePosition += 0.5;
    this.bg2.tilePosition += 1;
}
// This was not my solution, but the same principle. Check out the GitHub repo for the solution :)

Advice for Future Space Cadets

For those looking to embark on similar coding odysseys, here's my advice:

Do it for fun, not as a job.
Take breaks when you need them - the universe will still be there when you return.
Embrace the learning experience.
Don't be discouraged by fierce competition - use it as motivation.
Remember, not winning doesn't mean your program isn't good. Every creation has value.

Conclusion

Winning the JSM Programming Challenge with Cosmic Explorer was an incredible journey through the vast expanse of game development. It taught me new skills, pushed my boundaries, and most importantly, reminded me of the joy of coding. Whether you're a seasoned space captain or a rookie cadet, I encourage you to take on similar challenges. You never know what new worlds you might discover.

Happy coding, and may your compile times be short and your bugs few!

Modern Web Development Frameworks: Comparing Popular Frameworks and Their Use Cases

Pelle Nilsen — Thu, 19 Sep 2024 07:46:53 +0000

In the rapidly evolving landscape of web development, choosing the right framework can significantly impact project success. This article delves into some of the most popular web development frameworks, comparing their strengths and ideal use cases to help developers make informed decisions.

React

Overview

React, developed and maintained by Facebook, is a JavaScript libriary for building user interfaces. It's known for its component-based architecture and virtual DOM for efficient rendering.

Key Features

Component-based architecture
Virtual DOM
JSX syntax
Large ecosystem and community support

Best Use Cases

Single-page applications (SPAs)
Large-scale web applications
Projects requiring frequent UI updates

Vue.js

Overview

Vue.js is a progressive JavaScript framework that's gained popularity due to its gentle learning curve and flexibility.

Key Features

Reactive data binding
Component system
Virtual DOM
Lightweight and fast

Best Use Cases

Small to medium-sized applications
Projects requiring quick prototyping
Applications with reactive interfaces

Angular

Overview

Angular, maintained by Google, is a comprehensive TypeScript-based framework known for its robustness and scalability.

Key Features

Two-way data binding
Dependency injection
TypeScript support
Comprehensive tooling

Best Use Cases

Large-scale enterprise applications
Complex single-page applications
Projects requiring strong typing and scalability

Next.js

Overview

Next.js is a React-based framework that enables server-side rendering and static site generation.

Key Features

Server-side rendering
Static site generation
Automatic code splitting
Built-in routing

Best Use Cases

SEO-focused web applications
E-commerce sites
Content-heavy websites

Svelte

Overview

Svelte is a modern framework that compiles your code to vanilla JavaScript at build time, resulting in smaller bundle sizes and improved performance.

Key Features

No virtual DOM
True reactivity
Less boilerplate code
Built-in state management

Best Use Cases

Performance-critical applications
Small to medium-sized applications
Applications with limited resources

Conclusion

Choosing the right web development framework depends on various factors, including project requirements, team expertise and scalability needs. React and Vue.js offer flexibility and are great for a wide range of projects. Angular shines in large-scale enterprise applications. Next.js is ideas for SEO-focused and content-rich sites, while Svelte is perfect for performance-critical applications.

Remember, the best framework is the one that aligns with your project goals and team capabilities. Keep exploring and experimenting to find the perfect fit for your next web development venture.

Code Quality and Clean Code: Techniques for Maintainable, Readable and Efficient Code

Pelle Nilsen — Wed, 18 Sep 2024 07:05:11 +0000

In the ever-evolving landscape of software development, writing high-quality, clean code is a crucial skill that sets apart exceptional developers. Clean code not only enhances readability and maintainability but also contributes to the overall efficiency and longevity of a project. This article will delve into the techniques and best practices for crafting code that stands the test of time and collaboration.

What is Clean Code?

Clean code refers to code that is easy to understand, modify and maintain. It's characterized by its simplicity, clarity and efficiency. The concept goes beyond just making code work; it's about making code that's easy for humans to read and reason about.

Characteristics of Clean Code

Readability

Clean code should be easily readable by other developers (and your future self). It should tell a story and convey its purpose clearly.

Example:

# Poor readability
def f(x, y):
    return x + y

#  Good readability
def add_numbers(first_number, second_number):
    return first_number + second_number

Simplicity

Keep your code as simple as possible. Avoid unnecessary complexity and over-engineering.

Example:

# Overly complex
def is_even(number):
    return TRUE if number % 2 == 0 else False

# Simple and clean
def is_even(number):
    return number % 2 == 0

Modularity

Break your code into smaller, reusable modules or functions. Each function should do one thing and do it well.

Example:

# Poor modularity
def process_data(data):
    # 100 lines of code doing multiple things

# Good modularity
def validate_data(data):
    # Validation logic

def transform_data(data):
    # Transformation logic

def save_data(data):
    # Saving logic

def process_data(data):
    validate_data(data)
    transformed_data = transform_data(data)
    save_data(transformed_data)

Consistent Naming Conventions

Use clear, consistent and meaningful names for variables, functions and classes.

Example:

# Poor naming
def calc(a, b):
    return a * b

# Good naming
def calculate_area(length, width):
    return length * width

Proper Comments and Documentation

Write self-documenting code, but use comments to explain complex logic or the "why" behind certain decisions.

Example:

# Poor commenting
# This function does stuff
def process_data(data):
    # Do things here
    pass

# Good commenting
def process_data(data):
    """
    Processes the input data by validating, transforming and saving it.

    Args:
        data (dict): The input data to be processed.

    Returns:
        bool: True if processing was successful, False otherwise.
    """
    # Implementation here

Techniques for Writing Clean Code

Follow the DRY (Don't Repeat Yourself) Principle: Avoid code duplication by extracting common functionality into reusable functions or classes.
SOLID Principles: Apply SOLID principles (Single Responsibility, Open-Closed, Liskov Substitution, Interface Segregation and Dependency Inversion) to create more maintainable and flexible code.
Use Version Control: Utilize Git or other version control systems to track changes and collaborate effectively.
Implement Error Handling: Handle exceptions gracefully and provide meaningful error messages.
Write Unit Tests: Create comprehensive unit tests to ensure your code works as expected and to catch regressions early.
Code Reviews: Regularly participate in code reviews to get feedback and learn from others.
Continuous Refactoring: Continuously improve your code by refactoring when you see opportunities for enhancement.
Use Static Code Analysis Tools: Employ tools like linters to catch potential issues and enforce coding standards automamtically.

Benefits of Clean Code

Improved Maintailability: Clean code is easier to maintain and update, reducing technical debt over time.
Enhanced Collaboration: Well-structured code allows team members to understand and contribute to the project more effectively.
Reduced Bugs: Clean code tends to have fewer bugs and its easier to debug when issues do arise.
Faster Development: While it may take more time initially, clean code speeds up development in the long run by making it easier to add new features and make changes.
Better Scalability: Clean, modular code is more scalable and adaptable to changing requirements.

Conclusion

Writing clean, high-quality code is an essential skill for any developer. It's not just about making your code work; it's about creating code that's easy to understand, maintain and extend. By following the techniques and best practices outlines in this article, you can significantly improve the quality of your code, leading to more successful and sustainable projects.

Remember, clean code is a continuous practice, not a one-time effort. Always strive to leave the code better than you found it, and your future self (and your teammates) will thank you. Make sure to leave your questions in the comments! Happy coding!

Version Control Best Practices - Mastering Git, Branching Strategies and Collaborative Workflows

Pelle Nilsen — Tue, 17 Sep 2024 08:00:30 +0000

In the ever-evolving landscape of software development, version control has become an indispensable tool for managing code, collaborating with team members, and maintaining project history. Among the various version control systems available, Git stands out as the most widely adopted. This article will delve into version control best practices, focusing on Git usage, effective branching strategies and collaborative workflows that can elevate your development process.

Understanding Version Control and Git

Version control is a system that helps track changes to files over time, allowing developers to review history, revert to previous states and manage different versions of their codebase. Git, a distributed version control system, has become the de facto standard in the industry due to its flexibility, speed and powerful branching capabilities.

Git Best Practices

Commit Early and Often

Make small, frequent commits rather than large, infrequent ones. This approach makes it easer to track changes, find bugs and revert is necessary.

Example:

# Good practice
git commit -m "Add user registration form"
git commit -m "Implement form validation"

# Avoid
git commit -m "Add user registration form and implement validation"

Write Meaningful Commit Messages

Your commit messages should clearly explain what changes were made and why. Follow a consistent format, such as the conventional commit format.

Example:

# Good commit message
git commit -m "feat(auth): implement two-factor authentication"

# Avoid
git commit -m "Update auth"

Use .gitignore

Create a .gitignore file to exclude unnecessary files (like build artifacts or dependencies) from version control.

Example:

# .gitignore
node_modules/
.env
*.log

Regularly Pull and Push

Keep your local repository up-to-date by pulling changes frequently, and push your commits reguarly to share your work with the team.

Example

git pull origin main
# Make your changes
git push origin feature-branch

Effective Branching Strategies

A well-planned branching strategy can significantly improve collaboration and code quality. Here are some popular branching models:

Git Flow

Git Flow is a branching model that uses multiple branches to manage development, releases and hotfixes.

main: Represents the production-ready state
developer: Integration branch for features
feature/*: For developing new features
release/*: For preparing releases
hotfix/*: For critical bug fixes

GitHub Flow

A simpler alternative to Git Flow, suitable for teams practicing continuous delivery.

main: Always deployable
Feature Branches: Created from main, merged back via pull requests

Trunk-Based Development

A branching strategy that involves making small, frequent changes directly to the main branch.

main: Primary branch where all development happens
Short-lived feature branches when necessary

Collaborative Workflows

Effective collaboration is key to successful development. Here are some best practices:

Use Pull Requests

Pull requests (PRs) facilitate code review and discussion before merging changes.

Best practices for PRs:

Keep them small and focused
Provide a clear description of changes
Link related issues or tickets
Respond promptly to feedback

Code Reviews

Implement a code review process to improve code quality and share knowledge.

Tips for effective code reviews:

Be constructive and respectful
Focus on code, not the person
Use automated tools to catch style issues
Explain the "why" behind suggestions

Continuous Integration (CI)

Implement CI to automatically build and test your code with each commit or PR.

Example CI workflow:

Developer pushes code to a feature branch
CI system builds the project
Automated tests run
Code quality checks performed
Results reported back to the PR

Use Tags for Releases

Tag important commits, especially for releases, to easily reference and deploy specific versions.

git tag -a v1.0.0 -m "Release version 1.0.0"
git push origin v1.0.0

Conclusion

Mastering version control, particularly Git, is crucial for efficient and collaborative software development. By following these best practices for Git usage, implementing effective branching strategies and adopting collaborative workflows, you can significantly improve your team's productivity and code quality.

Remember, the key to successful version control is consistency and communication. Establish clear guidelines for your team, and reguarly review and refine your processes. With these practices in place, you'll be well-equipped to handle the complexities of modern software development and deliver high-quality code efficiently.

Happy coding and collaborating!

Forem: Pelle Nilsen

What does CORS really do? 🤔

Table of Contents

The Same-Origin Policy Problem 🔒

Enter CORS: The Security Guard 💂

Common CORS Headers Explained 📋

Quick Node.js/Express Implementation 🛠️

Common CORS Gotchas 🎯

Best Practices 🌟

Conclusion 🎬

TrackFlix: From Idea to Reality - A Subscription Tracking Revolution

Introduction

The Spark of an Idea

Development Journey

Key Features of TrackFlix

1. Intuitive Calendar View

2. Comprehensive Subscription Management

3. Financial Insights

4. Multi-Currency Support

5. Pre-implemented Subscription Logos

Technical Implementation

User Feedback and Continuous Improvement

Future Roadmap

Conclusion

How to Use CSS Properly: Best Practices for Clean and Efficient Styling

What is CSS?

Characteristics of Good CSS

Organized and Structured

Follows a Naming Convention

Utilizes CSS Preprocessing

Responsive and Flexible

Optimized for Performance

Characteristics of Bad CSS

Overly Specific Selectors

Repetitive Code

Inline Styles

!important Overuse

Lack of Comments

Best Practices for Using CSS Properly

Conclusion

API Design and Development: Best practices for creating robust and scalable APIs.

What is an API?

Characteristics of a Good API

Clear and Consistent Naming Conventions

Proper Use of HTTP Methods

Versioning

Proper Error Handling

Pagination

Characteristics of a Bad API

Inconsistent Design

Lack of Documentation

Overexposing Internal Details

Ignoring Security Best Practices

Poor Performance

Best Practices for API Design and Development

Design with the Consumer in Mind

Use RESTful Principles

Implement Proper Authentication and Authorization

Provide Comprehensive Documentation

Use HTTPS

Implement Rate Limiting

Design for Scalability

Implement Monitoring and Logging

Use Content Negotiation

Provide a Sandbox Environment

Conclusion

How I Won the JSM Programming Challenge

The Challenge: A Universe of Possibilities

Choosing My Path: The Birth of Cosmic Explorer

Preparing for the Journey: Learning Phaser

The Toughest Asteroid Field: Mastering Phaser

Unexpected Nebulae: Fierce Competition

New Constellations: Learning and Growth

The Winning Formula: Nostalgia and Smooth Gameplay

Advice for Future Space Cadets

Conclusion

Modern Web Development Frameworks: Comparing Popular Frameworks and Their Use Cases

React

Overview

Key Features