DOCSEARCHbyAlgolia
Submit Docs

Godsenal Blog

website·Indexed 31 days ago

https://godsenal.com

A technical blog featuring articles on frontend development, focusing on React, Redux, JavaScript, and Webpack. Topics include React Hooks, Redux-Saga, Next.js, functional programming, GraphQL, and infrastructure tools like AWS and GitHub Actions.

Tokens
25.8K
Snippets
112
Records
149
Agent score
49%

What's inside Godsenal

  1. Overview of Functional Programming (FP) in JavaScript

    Functional Programming is a programming paradigm focused on building software through the use of pure functions, avoiding shared state, mutable data, and side effects. Unlike Object-Oriented Programming, where state is often shared and bundled with object methods, FP is declarative and treats the application state as a flow through pure functions. This approach typically results in code that is more concise, predictable, and easier to test.

  2. Understand the N+1 problem in GraphQL

    The N+1 problem occurs in GraphQL when a query fetches a list of items (e.g., Authors) and then executes a separate database query for a related field (e.g., Posts) for every item in that list.

    For example, if you fetch 10 authors, GraphQL will execute 1 query to get the authors, and then 10 additional queries to get the posts for each author, resulting in 11 (N+1) total database calls. This leads to significant performance degradation, especially when the database is on a separate server.

  3. Understand Web Push architecture and requirements

    Web Push allows a server to send messages to a web application even when the application is not currently loaded in the browser.

    Key Components:

    • Push API: Enables the app to receive messages from the server in the background.
    • Service Worker: A script that runs in the browser background, independent of the web page, to handle push events and display notifications.
    • Push Server: A browser-vendor provided server (e.g., Google, Mozilla) that acts as the intermediary between your application server and the client browser.
    • VAPID (Voluntary Application Server Identification): A mechanism using Public/Private key pairs to encrypt messages and ensure only authorized servers can send push notifications to the client.

    Constraints:

    • Must be served over HTTPS (localhost is permitted for development).

  4. Apply functional programming principles for reusable utilities

    Functional programming promotes the use of Higher-Order Functions and containers (like Functors) to create general-purpose utility functions that can operate across different data types. For example, the concept of a container applies not only to arrays but also to streams (lists expressed over time), allowing the same utility logic to process incoming event streams.
    // Example of a reusable mapping utility using a pure function
const double = n => n.points * 2;
const doubleMap = numbers => numbers.map(double);

console.log(
  doubleMap([
    { name: "ball", points: 2 },
    { name: "coin", points: 3 },
    { name: "candy", points: 4 }
  ])
);
// Output: [ 4, 6, 8 ]

  6. Understand GraphQL advantages over REST

    GraphQL serves as an efficient alternative to REST APIs by addressing common data fetching issues. Key advantages include:

    • Elimination of Over-fetching and Under-fetching: Clients request exactly the fields they need, preventing the server from sending unnecessary data or requiring multiple requests to gather related resources.
    • Efficient Data Loading: A single query can fetch multiple related resources (e.g., a user and their posts) in one round trip, whereas REST typically requires multiple endpoints (e.g., /api/users and /api/users/posts).
    • Flexibility: It allows for faster feature iteration and easier adaptation to various client-side platforms by decoupling the client's data requirements from the server's fixed response structures.

  8. Understand JavaScript Decorators

    Decorators are a syntax used to wrap or modify the behavior of code, similar to higher-order functions. They increase code reusability and provide a cleaner, more readable way to apply logic to classes and class members compared to standard higher-order functions.

  9. Implement basic app opening using URL Schemes

    URL Schemes allow a user to be connected directly to specific content in an app using a custom URI (e.g., naversearchapp://). The browser reads the scheme and opens the corresponding app if it is configured and installed.

    Limitations:

    • Collision: If multiple apps use the same scheme, the OS will ask the user which app to open.
    • Installation: It does not work if the app is not installed on the device.
    naversearchapp://

  11. Redirect port 80 to a high-numbered port using iptables

    On Linux systems, ports below 1024 require root privileges to bind, which can create security risks if the web server runs as root. To avoid this, you can use iptables to forward traffic from port 80 (the default HTTP port) to a high-numbered port (e.g., 8080) where the web server is running without root privileges. This allows users to access the site without specifying a port number in the URL.
    # Redirect traffic from port 80 to port 8080
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080

# Verify the NAT rules
iptables -t nat -L

  12. Optimize Redux selectors with Reselect memoization

    The reselect library prevents unnecessary re-calculations in mapStateToProps by memoizing the results of selectors. A selector created with createSelector only re-computes its value if the results of its input selectors (dependencies) change. If the store updates but the specific slices of state used by the input selectors remain the same, the cached result is returned.
    import { createSelector } from 'reselect';

// Input selectors: extract raw data from state
const getTodos = state => state.todo.todos;
const getFilter = state => state.filter.filter;

// Memoized selector: only re-runs if getTodos or getFilter results change
export const getCompletedTodos = createSelector(
  [getTodos, getFilter],
  (todos, filter) => todos.filter(todo => todo.isCompleted === filter)
);