Categories
Uncategorised

Building Scalable Component Libraries: Uniting Shadow DOM and Tailwind CSS

Introduction

Creating scalable and reusable component libraries is a crucial aspect of modern web development. By combining the power of Shadow DOM and the flexibility of Tailwind CSS, developers can achieve enhanced encapsulation, styling control, and maintainability. In this blog post, we’ll explore why Shadow DOM is a valuable choice for component libraries and delve into the seamless integration of this technology with Tailwind CSS.

The Power of Shadow DOM

Shadow DOM offers a native solution for creating encapsulated and reusable components. With self-contained DOM trees, styles, and markup, it addresses key challenges in modern web development. Its advantages are numerous:

  1. Scoped Styling: Components can have distinct styles that won’t interfere with the global styles of the parent document or other components.
  2. Encapsulation: The encapsulation provided by Shadow DOM ensures that components function independently, reducing the chances of unintended style conflicts or JavaScript interference.
  3. Reusability: Components built with Shadow DOM are inherently reusable, making it easier to maintain consistent design patterns across projects.
  4. Tree Shaking: Shadow DOM aids in optimizing your codebase by allowing tools to remove unused styles and markup during the build process.

Weighing the Pros and Cons

As with any technology, Shadow DOM comes with its own set of pros and cons. It’s important to consider these factors before implementing it in your component library:

Pros:

  • Isolates Styles and CSS: Shadow DOM isolates styles, preventing unwanted CSS bleed from other components or the parent document.
  • Enables Scoped Styling: Scoped styling ensures that component styles don’t unintentionally affect other parts of the application.
  • Inherit CSS Variables for Theming: Components can inherit CSS variables, facilitating theming and consistent design across the application.
  • Encapsulates Implementation: Shadow DOM encapsulation shields the internal implementation details of a component, reducing the risk of breaking changes.
  • Leverages Native Browser Support: Modern browsers support Shadow DOM natively, enhancing performance and reducing the need for polyfills.

Cons:

  • Browser Support Challenges: While modern browsers have good Shadow DOM support, cross-browser compatibility might require polyfills.
  • Added Complexity: Implementing Shadow DOM can introduce additional complexity to your development process.
  • CSS Limitations: Some CSS features might be limited within the Shadow DOM context.
  • Styling Challenges: Styling components from a parent context becomes more challenging due to the encapsulation.
  • Theming Effort: Implementing theming within Shadow DOM components might require extra effort.
  • Potential CSS Collisions: Careful management of CSS class names is necessary to avoid collisions within the Shadow DOM.
  • SSR Rehydration Requirement: If server-side rendering (SSR) is a concern, rehydrating Shadow DOM components on the client side might be needed.
  • Debugging Complexity: Debugging components within the Shadow DOM can be more intricate than debugging traditional components.

While the tradeoffs should be carefully evaluated, Shadow DOM’s advantages often outweigh its downsides, especially as browser support continues to improve.

Seamless Integration with Tailwind CSS

Tailwind CSS, known for its utility-first approach, can be seamlessly integrated with Shadow DOM to build robust component libraries. Here’s how you can make the most of this combination:

  1. Build Components with Tailwind CSS: Create components using Tailwind CSS as you normally would, leveraging its utility classes.
  2. Generate Shadow DOM with shadowUi(): Wrap your components with the shadowUi() function to generate Shadow DOM equivalents.
  3. Customize Child Elements: Pass style props to customize child elements within the Shadow DOM, maintaining encapsulation.
  4. Theming via CSS Variables: Inherit CSS variables from the parent document for easy theming of components.
  5. Reusable Component Classes: Use the @apply directive to extract reusable component classes, enhancing maintainability.
  6. Responsive Design: Leverage responsive modifiers and variants from Tailwind CSS to create adaptive components.

Conclusion

By combining the strengths of Shadow DOM and the versatility of Tailwind CSS, developers can create scalable and encapsulated component libraries. While the tradeoffs of Shadow DOM should be considered, its benefits in terms of encapsulation, reusability, and styling control can greatly enhance your web development projects. With the right approach and careful consideration of your project’s requirements, you can harness the power of these technologies to build robust and adaptable web components.

Categories
Next.js

304 Redirect trick – Next.js

It’s only 65 cents per million requests if you deploy it on Vercel…

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export default async function middleware(request: NextRequest) {
  console.log("hostname", request.nextUrl.host);

  const host = request.nextUrl.host;

  if (host === "video.fmfreedom.com")
    return NextResponse.redirect("https://beta.nextjs.org");

  if (host === "chat.fmfreedom.com")
    return NextResponse.redirect("https://twitter.com/tedcruz");

  return NextResponse.next();
}

// Stop Middleware running on static files and public folder
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     * - public folder
     * - public folder
     */
    "/((?!static|.*\\..*|_next|favicon.ico).*)",
    "/",
  ],
};
Categories
Uncategorised

Block public access (Bucket settings) – AWS S3

To be honest, the explanation on this area is “interesting”. I can read and understand every single word and they are English. But I just cannot understand how this thing works…

So I found a slightly better explanation for it. By the way, please keep in mind that “Block Public Access” is a shield that is helping you set up the access policy.

A few examples…

  • Block public access to buckets and objects granted through new access control lists (ACLs): Imagine that you have a bucket that contains your company’s financial data. You want to make sure that only authorized users can access the data, so you enable the “Block public access to buckets and objects granted through new access control lists (ACLs)” option. This will prevent anyone from accidentally granting public access to the data through a new ACL.
  • Block public access to buckets and objects granted through any access control lists (ACLs): Imagine that you have a bucket that contains your company’s trade secrets. You want to make sure that the data is completely inaccessible to unauthorized users, so you enable the “Block public access to buckets and objects granted through any access control lists (ACLs)” option. This will block public access through all ACLs, including existing ACLs that allow public access.
  • Block public access to buckets and objects granted through new public bucket or access point policies: Imagine that you have a bucket that contains your company’s customer data. You want to make sure that the data is only accessible to authorized users, so you enable the “Block public access to buckets and objects granted through new public bucket or access point policies” option. This will prevent anyone from accidentally granting public access to the data through a new bucket or access point policy.
  • Block public and cross-account access to buckets and objects through any public bucket or access point policies: Imagine that you have a bucket that contains your company’s intellectual property. You want to make sure that the data is completely inaccessible to unauthorized users, including users from other AWS accounts, so you enable the “Block public and cross-account access to buckets and objects through any public bucket or access point policies” option. This will block public access through all bucket and access point policies, and it will also block cross-account access.

Block public access (bucket settings)

You can use the Block all public access setting to prevent anyone from accessing your S3 bucket or object. This is a good security practice, as it helps to protect your data from unauthorized access.

Keywords:
  • Public access: This means that anyone can access your S3 bucket or object, even if they don’t have an AWS account.
  • Access control lists (ACLs): These are lists that define who has access to your S3 bucket or object.
  • Bucket policies: These are more granular than ACLs and can be used to control access based on the user’s identity, the IP address they are using, or other criteria.
  • Access point policies: These are similar to bucket policies but apply to access points instead of buckets.
  • Access object: Objects are the basic unit of storage. An object can be a file, a directory, or a collection of files. Access objects mean that you can control who has access to your objects and how they can access them. You can do this by using the way is showing above. Such as access control lists (ACLs), bucket policies, and access point policies.

Block public access to buckets and objects granted through new access control lists (ACLs)

“S3 will block public access permissions applied to newly added buckets or objects, and prevent the creation of new public access ACLs for existing buckets and objects. This setting doesn’t change any existing permissions that allow public access to S3 resources using ACLs.”

When you enable this setting, it prevents anyone from accessing your S3 bucket or object through a new ACL. This means that if you create a new bucket or object, and you try to grant public access to it through an ACL, the request will be denied.

However, this setting does not affect any existing ACLs that allow public access. This means that if you have already created an ACL that allows public access to a bucket or object, this setting will not change that.

This setting can be a good way to protect your S3 buckets and objects from unauthorized access. By preventing anyone from creating new ACLs that allow public access, you can help to ensure that your data is only accessible to those who you have explicitly granted access to.

Here’s an analogy that might help you understand this setting:

Imagine that you have a bucket of toys that you want to share with your friends. You could give each of your friends a key to the bucket, but this would be a lot of work and it would be easy for someone to lose their key.

Instead, you could create a new bucket of toys that only you have the key to. This would make it much more difficult for someone to unauthorized access your toys.

The “Block public access to buckets and objects granted through new access control lists (ACLs)” setting is like creating a new bucket of toys that only you have the key to. This setting prevents anyone from creating new ACLs that allow public access to your S3 buckets and objects, which can help to protect your data from unauthorized access.

Block public access to buckets and objects granted through any access control lists (ACLs)

“S3 will ignore all ACLs that grant public access to buckets and objects.” – It is easy to understand now.

Here are the steps on how to set up an access control list (ACL) in the Amazon S3 console:
  1. Go to the Amazon S3 console.
  2. Select the bucket or object that you want to configure an ACL for.
  3. Click the Permissions tab.
  4. Click the Edit button.
  5. In the ACL section, select the Add button.
  6. In the Grantee field, enter the name of the user or group that you want to grant access to.
  7. In the Permissions field, select the permissions that you want to grant.
  8. Click the Save button.

Block public access to buckets and objects granted through new public bucket or access point policies

“S3 will block new bucket and access point policies that grant public access to buckets and objects. This setting doesn’t change any existing policies that allow public access to S3 resources.”

This option prevents anyone from accessing your S3 buckets and objects through new buckets or access point policies that allow public access. This means that if you create a new bucket or access point policy, and you try to grant public access to it, the request will be denied.

However, this setting does not affect any existing bucket or access point policies that allow public access. This means that if you have already created a bucket or access point policy that allows public access to a bucket or object, this setting will not change that.

This setting can be a good way to protect your S3 buckets and objects from unauthorized access. By preventing anyone from creating new bucket or access point policies that allow public access, you can help to ensure that your data is only accessible to those who you have explicitly granted access to.

Block public and cross-account access to buckets and objects through any public bucket or access point policies

“S3 will ignore public and cross-account access for buckets or access points with policies that grant public access to buckets and objects.”

This option is the most restrictive of the four options. It blocks public access through all bucket and access point policies, and it also blocks cross-account access. Cross-account access is when users from other AWS accounts have access to your S3 buckets and objects.

Categories
Uncategorised

Access Point – AWS S3

An access point is a named network endpoint that you can use to access objects in a bucket. Access points have a unique set of permissions and network controls that you can use to control who has access to your objects and how they can access them.

Access points are a good way to simplify access control for your S3 buckets. With access points, you can create a single set of permissions that apply to all of the objects in a bucket. This can make it easier to manage access to your objects and to audit who has access to them.

Access points also provide a way to control network access to your objects. You can configure access points to only allow requests from specific IP addresses or from specific AWS accounts. This can help to protect your objects from unauthorized access.

To create an access point, you need to specify a name for the access point, a bucket, and a set of permissions. You can also configure network controls for the access point.

Once you have created an access point, you can use it to access objects in the bucket. You can use the access point URL to access objects, or you can use the AWS SDKs or the AWS CLI to access objects through the access point.

Here’s an analogy that might help you understand access points:

“Imagine that you have a bucket of toys that you want to share with your friends. You could give each of your friends a key to the bucket, but this would be a lot of work and it would be easy for someone to lose their key.”

Instead, you could create a special access point for your bucket. This access point would have a unique URL that only your friends know. You could also configure the access point to only allow requests from specific IP addresses. This would make it much more difficult for someone to unauthorized access your toys.

Access points are a powerful way to control access to your S3 objects. They can make it easier to manage access to your objects and to protect them from unauthorized access.

Categories
Backend

How to rename the collection – MongoDB

In MongoDB, you can use the db.runCommand() method to rename a collection. The db.runCommand() method takes a document as its argument, and the document must contain the following props:

  • renameCollection: The name of the collection to be renamed.
  • to: The new name of the collection.

For example, to rename the collection your_database.your_table to your_database.your_new_table_name, you would use the following command:

db.runCommand({renameCollection: "your_database.your_table", to: "your_database.your_new_table_name"});

If the rename operation was successful, the db.runCommand() method will return a document with the status of the operation. 

{
  ok: 1,
  '$clusterTime': {
    clusterTime: Timestamp({ t: 1689910863, i: 27 }),
    signature: {
      hash: Binary(Buffer.from("3f999f9155064aa974469f94304958eba5eef4b3", "hex"), 0),
      keyId: Long("7200478234696220854")
    }
  },
  operationTime: Timestamp({ t: 1689910863, i: 27 })
}

Here are some additional things to keep in mind when renaming a collection:

  • You can only rename a collection that exists in the current database.
  • You cannot rename a collection to a name that already exists in the database.
  • If you rename a collection that is being used by a running application, the application may need to be restarted in order to see the changes.
Categories
Uncategorised

Consistent type import – Next.js

If you start using the latest version of next.js, which is 13, you might have the issue below.

The simple fix is adding the option below

{
...
"verbatimModuleSyntax": true,
...
}

Click to see the source from the Github pull request discussion.

Categories
Uncategorised

Inline func vs useCallback

Here’s an example that compares inline functions with functions using useCallback. Many people believe that the hook is faster, but that’s not the case when you only have a simple, basic, or light function. So, don’t waste your time on these.

function ComponentWithInlineFunction() {
  const clickMe = evt => evt.preventDefault();
  return React.createElement('button', {onClick: clickMe}, 'Click me!');
}

function ComponentWithUseCallback() {
  const clickMe = React.useCallback(evt => evt.preventDefault(), []);
  return React.createElement('button', {onClick: clickMe}, 'Click me!');
}


Benchmark: React useCallback hook vs inline function – MeasureThat.net

Categories
Uncategorised

Copy HDR “magnet”

copy([…document.querySelectorAll('.module-row-title')].filter(item=>item.querySelector('h4').innerText.includes('HDR')).map(item=>item.querySelector('p').innerText))
Categories
Uncategorised

BetterDisplay: The Ultimate Tool to Manage Your Mac Display Settings

https://github.com/waydabber/BetterDisplay

If you're someone who uses a Mac, you know how important it is to have the right display settings. Whether you're a designer, developer, or just someone who wants their display to look great, having the right tools to manage your display settings is crucial. That's where BetterDisplay comes in.

BetterDisplay is a powerful tool that lets you convert your displays to fully scalable screens, manage display configuration overrides, allows brightness and color control, provides XDR/HDR brightness upscaling (extra brightness beyond 100% for compatible displays with Apple Silicon Macs), full dimming to black, helps you create and manage virtual displays (dummies) for your Mac, create Picture in Picture windows of your displays and gives you a host of other features to manage your display's settings easily from the menu bar.

One of the key features of BetterDisplay is its ability to convert displays to fully scalable screens. This means that you can adjust the resolution of your display to fit your needs, without having to worry about losing image quality. With BetterDisplay, you can easily adjust the resolution of your display to fit your needs, whether you're working on a small screen or a large one.

Another great feature of BetterDisplay is its ability to manage display configuration overrides. This means that you can create custom display settings for specific applications, so that they look their best on your screen. For example, if you're a designer, you might want to create custom display settings for Photoshop or Illustrator, so that your designs look their best.

BetterDisplay also allows you to control the brightness and color of your display. This means that you can adjust the brightness and color of your display to fit your needs, whether you're working in a bright room or a dark one. You can also use BetterDisplay to provide XDR/HDR brightness upscaling, which means that you can get extra brightness beyond 100% for compatible displays with Apple Silicon Macs.

In addition to these features, BetterDisplay also lets you create and manage virtual displays (dummies) for your Mac. This means that you can create virtual displays that can be used for testing or for other purposes. You can also create Picture in Picture windows of your displays, which means that you can have multiple displays on your screen at once.

Overall, BetterDisplay is a truly wonderful tool for anyone who wants to manage their Mac display settings. With its powerful features and easy-to-use interface, it's the perfect tool for designers, developers, or anyone who wants their display to look great. So if you're looking for a way to manage your Mac display settings, be sure to check out BetterDisplay.

Categories
Uncategorised

iOS Stimulator Boot Error


The error, showing at the bottom, is likely happening because there’s a problem with the iOS Simulator on your machine. The xcrun utility is a tool provided by Apple for developers to interact with iOS SDKs and simulators. It appears that xcrun is unable to boot your iOS simulator due to an issue with the runtime bundle.

There are a few things that we could try to fix the issue. In the current case, I need to start iOS Simulator again in order to allow the expo to start the iOS Simulator.

  1. Check Xcode Installation: Ensure that Xcode is properly installed on your machine. xcrun is a part of Xcode, and if Xcode is not properly installed, it might lead to this issue. You can download or update Xcode from the Mac App Store.
  2. Reset iOS Simulator: Sometimes, issues with the iOS Simulator can be fixed by resetting it. You can do this by opening the iOS Simulator and then going to the menu bar. Click on “Device” -> “Erase All Content and Settings”.
  3. Update Command Line Tools: This error might also occur if your Xcode Command Line Tools are outdated. You can update them by opening Xcode, navigating to “Preferences” -> “Locations”, and then select the latest version in the “Command Line Tools” dropdown.
  4. Clean Cache: Cleaning your project and npm cache could also help. You can do this by running the following commands in your terminal:
Starting project at /Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main
Starting Metro Bundler
Error: xcrun exited with non-zero code: 2
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Unable to boot device because we cannot determine the runtime bundle.
No such file or directory
Error: xcrun exited with non-zero code: 2
    at ChildProcess.completionListener (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/spawn-async/build/spawnAsync.js:52:23)
    at Object.onceWrapper (node:events:628:26)
    at ChildProcess.emit (node:events:513:28)
    at maybeClose (node:internal/child_process:1091:16)
    at ChildProcess._handle.onexit (node:internal/child_process:302:5)
    ...
    at Object.spawnAsync [as default] (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/spawn-async/build/spawnAsync.js:17:21)
    at Object.xcrunAsync (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/ios/xcrun.js:18:46)
    at simctlAsync (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/ios/simctl.js:233:24)
    at bootDeviceAsync (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/ios/simctl.js:166:15)
    at Object.bootAsync (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/ios/simctl.js:143:11)
    at action (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/ios/AppleDeviceManager.js:73:31)
    at Object.waitForActionAsync (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/utils/delay.js:18:26)
    at ensureSimulatorOpenAsync (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/ios/AppleDeviceManager.js:69:44)
    at async Object.resolveAsync [as resolveDeviceAsync] (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/ios/AppleDeviceManager.js:98:24)
    at async ApplePlatformManager.openProjectInExpoGoAsync (/Users/YourAccount/Downloads/Fast-Food-App-React-Native-UI-main/node_modules/@expo/cli/build/src/start/platforms/PlatformManager.js:57:31)