GitHub: Persist "Hide whitespace" preference across PRs

Default 'Hide whitespace' can significantly save your time on reviewing. Many many developers have asked for this feature for a long time, but GitHub still doesn't officially support it. You don't have to wait. This small browser extension GitHub Whitespace comes to rescure!

A small tip to show a busy cursor in Winforms applications

I learnt this when reviewing my colleague's code.

try 
{
    Cursor.Current = Cursors.WaitCursor;
    // do some time-consuming job
}
finally
{
    Cursor.Current = Cursors.Default;
}

Quick Guide: Building an API Server with Express and JWT Authentication

In this tutorial, I'll walk you through setting up a simple API server using Express and express-jwt for JSON Web Token (JWT) authentication. By the end, you'll have a functional server that can issue JWTs and verify them for secure endpoints. Let's dive in!

Step 1: Setup and Install Dependencies

First, create a new project directory and initialize a Node.js project. Then, install the required packages:

mkdir express-jwt-api
cd express-jwt-api
npm init -y
npm install express express-jwt jsonwebtoken body-parser

Step 2: Create the Basic Server

Create a server.js file to set up your Express server:

const express = require('express');
const bodyParser = require('body-parser');
const routes = require('./routes');

const app = express();
app.use(bodyParser.json());
app.use('/api', routes);

const PORT = 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

This code sets up an Express server and uses body-parser to parse JSON requests.

Step 3: Define Routes

Create a routes.js file for defining our API routes. We'll add a login route to generate JWTs and a protected route that requires JWT verification.

const express = require('express');
const jwt = require('jsonwebtoken');
const { verifyToken } = require('./middleware');

const router = express.Router();

// Login route to generate JWT
router.post('/login', (req, res) => {
    const { username, password } = req.body;
    if (username === 'testuser' && password === 'testpassword') {
        const user = { id: 1, username: 'testuser' };
        const token = jwt.sign(user, 'your_secret_key', { expiresIn: '1h' });
        res.json({ token });
    } else {
        res.status(401).json({ message: 'Invalid credentials' });
    }
});

// Protected route
router.get('/protected', verifyToken, (req, res) => {
    console.log('req.user:', req.user);
    if (req.user && req.user.id) {
        res.json({ message: 'Protected route accessed.', userId: req.user.id });
    } else {
        res.status(401).json({ message: 'Unauthorized' });
    }
});

router.get('/public', (req, res) => res.send('This is a public route.'));

module.exports = router;

Step 4: Implement JWT Verification

Create a middleware.js file to define the JWT verification middleware:

const { expressjwt } = require('express-jwt');

const verifyToken = expressjwt({
    secret: 'your_secret_key',
    algorithms: ['HS256'],
    requestProperty: 'user'
});

module.exports = { verifyToken };

This middleware verifies the JWT and attaches the decoded payload to req.user.

Step 5: Test Your API

  1. Start the server:

    node server.js
    
  2. Generate a JWT by sending a POST request to /api/login with a JSON body { "username": "testuser", "password": "testpassword" }. You'll get a token in response.

  3. Use the token to access the protected route:

    curl -H "Authorization: Bearer YOUR_JWT" http://localhost:3000/api/protected
    

    You should see a response with the user ID from the token.

Conclusion

You've now set up a basic API server with Express and JWT authentication! This setup allows you to issue and verify JWTs, providing a foundation for secure API endpoints. Feel free to expand on this by integrating a database for user management or adding more endpoints.


Feel free to modify and expand this guide to suit your needs. Happy coding! 🧑‍💻🚀

Efficiently Map Related Objects in SqlSugar

Introduction

When working with relational databases in .NET, one common requirement is to join related tables and map the results to objects. This can become cumbersome if done manually for each field. SqlSugar, a powerful ORM for .NET, simplifies this process by providing built-in methods for automatic mapping. This blog post will guide you through using SqlSugar’s Mapper feature to map related objects efficiently.

Setting Up Your Entities

Let’s start by defining two simple entities: Note and User. We want to map User information into each Note record based on a foreign key relationship.

public class Note
{
    [SugarColumn(IsPrimaryKey = true, IsIdentity = true)]
    public long Id { get; set; }
    public long UserId { get; set; }
    public string Content { get; set; } = string.Empty;

    [SugarColumn(IsIgnore = true)]
    public User? User { get; set; }  // Navigation property for User
}

public class User
{
    [SugarColumn(IsPrimaryKey = true, IsIdentity = true)]
    public long Id { get; set; }
    public string Username { get; set; } = string.Empty;
    public string? Gravatar { get; set; } = string.Empty;
}

Fetching and Mapping Data

Using SqlSugar, you can fetch data from the Note table and join it with the User table to get complete information for each note, including the associated user details. The Mapper method is key to simplifying this process.

Here’s how to write a method that retrieves paginated Note data along with related User information:

private async Task<PageData<Note>> GetPagedNotesAsync(int pageSize = 20, int pageNumber = 1,
    Expression<Func<Note, bool>>? filter = null, Expression<Func<Note, object>>? orderBy = null, bool isAsc = true)
{
    var pageData = new PageData<Note>
    {
        PageIndex = pageNumber,
        PageSize = pageSize
    };
    RefAsync<int> totalCount = 0;

    // Query with join and mapper
    var notes = await db.Queryable<Note, User>((n, u) => new JoinQueryInfos(
            JoinType.Inner, n.UserId == u.Id
        ))
        .WhereIF(filter != null, filter)
        .OrderByIF(orderBy != null, orderBy, isAsc ? OrderByType.Asc : OrderByType.Desc)
        .Mapper(n => n.User, n => n.UserId)  // Automatically map User based on UserId
        .ToPageListAsync(pageNumber, pageSize, totalCount);

    pageData.TotalCount = totalCount;
    pageData.DataList = notes;
    return pageData;
}

Key Steps Explained

  • Join Query: The Queryable method with JoinQueryInfos specifies an inner join between the Note and User tables based on UserId.

  • Conditional Clauses: WhereIF and OrderByIF conditionally apply filters and ordering based on the provided expressions, offering flexibility for dynamic queries.

  • Automatic Mapping: The Mapper method maps the User object to the Note entity. It uses the foreign key UserId to establish this relationship, making it unnecessary to manually assign each field from the User table to the Note.

Conclusion

With SqlSugar’s Mapper feature, mapping related entities becomes a straightforward task. This reduces boilerplate code and improves code maintainability. By defining navigation properties and leveraging the power of Mapper, you can effortlessly join and map complex data structures, streamlining your development workflow.

Sharing this approach with fellow developers will not only save them time but also encourage the use of efficient, modern ORM practices in .NET applications.

Maintaining Scroll Position in Flutter's ListView: A Practical Guide

If you’ve worked with Flutter’s ListView, you might have encountered a scenario where you navigate between pages, and upon returning, the scroll position isn’t where you expected it to be. Recently, I faced a similar challenge with a note-taking app. Every time I moved between pages, I ended up at the bottom of the new page. Not the best user experience, right?

The Problem

In my note-taking app, I wanted the NoteList widget to always start at the top position whenever it’s built or updated. This way, users wouldn’t have to manually scroll up to see the latest notes. The challenge was to encapsulate the scroll behavior within the NoteList widget itself, without having to manage the scroll status from its parent widget. Here’s how we achieved that.

The Initial Implementation

Initially, NoteList was a simple StatelessWidget that displayed a list of notes grouped by their creation date. However, it didn’t retain or reset the scroll position upon navigation or page refreshes, which led to an inconsistent and frustrating user experience. Here’s a simplified version of the original NoteList:

class NoteList extends StatelessWidget {
  final List<Note> notes;
  final Function(Note) onTap;

  const NoteList({required this.notes, required this.onTap});

  @override
  Widget build(BuildContext context) {
    // Group notes by date
    final notesByDate = <String, List<Note>>{};
    for (var note in notes) {
      final dateKey = note.createDate!;
      notesByDate[dateKey] = notesByDate[dateKey] ?? [];
      notesByDate[dateKey]!.add(note);
    }

    return ListView.builder(
      itemCount: notesByDate.keys.length,
      itemBuilder: (context, index) {
        final dateKey = notesByDate.keys.elementAt(index);
        final dayNotes = notesByDate[dateKey]!;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: dayNotes.map((note) => GestureDetector(
              onTap: () => onTap(note),
              child: Text(note.content),
            )).toList(),
        );
      },
    );
  }
}

The Solution

To solve this, we needed to ensure that every time NoteList was built, it would start at the top of the list. We introduced a ScrollController to manage the scroll position and added a simple logic to reset the scroll position to the top whenever the widget is built or updated.

Here's how we transformed the NoteList:

  1. Added a ScrollController: This allows us to control the scroll position programmatically.
  2. Reset Scroll Position: Using WidgetsBinding.instance.addPostFrameCallback, we ensure the scroll is reset after the widget's frame is built.

Here's the updated NoteList with these improvements:

class NoteList extends StatelessWidget {
  final List<Note> notes;
  final Function(Note) onTap;
+  final ScrollController _scrollController = ScrollController();

  NoteList({required this.notes, required this.onTap}) {
+    // Scroll to the top whenever the widget is built or updated
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _scrollController.jumpTo(0);
+    });
  }

  @override
  Widget build(BuildContext context) {
    // Group notes by date
    final notesByDate = <String, List<Note>>{};
    for (var note in notes) {
      final dateKey = note.createDate!;
      notesByDate[dateKey] = notesByDate[dateKey] ?? [];
      notesByDate[dateKey]!.add(note);
    }

    return ListView.builder(
+      controller: _scrollController,
      itemCount: notesByDate.keys.length,
      itemBuilder: (context, index) {
        final dateKey = notesByDate.keys.elementAt(index);
        final dayNotes = notesByDate[dateKey]!;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: dayNotes.map((note) => GestureDetector(
              onTap: () => onTap(note),
              child: Text(note.content),
            )).toList(),
        );
      },
    );
  }
}

Key Takeaways

  1. Encapsulation: By managing the scroll state within NoteList, we keep the parent widget cleaner and more focused on data management.
  2. Consistent User Experience: Resetting the scroll position ensures users always start at the top, providing a predictable and pleasant experience.
  3. Simple Yet Effective: Sometimes, small changes like adding a ScrollController can significantly enhance the usability of your app.

This solution should help other developers facing similar issues with managing scroll positions in Flutter. By following this approach, you can ensure that your list-based components offer a consistent and user-friendly experience.

By the way, my simple note taking app has been released at https://happynotes.shukebeta.com, and I'll improve it day by day. It is an free web application, and it has an android version on GitHub.

Feel free to use it and give me feedback on GitHub!