react
-
Webpack – Build script Optimise
These are few tips on improving webpack performance. CSS Loaders In this configuration, webpack won’t need to scan the entire node_modules for css files because we know that only component-library-1 and component-library-2 packages would contain css files. This helps us in saving a little bit of time. Thse will be added as PostCSS plugins. When webpack processes a .css file,… Continue reading
-
JavaScript codes that can break a Web page
I’ve tried to gather some common examples of JavaScript code that can break a React application and prevent it from rendering. The rationale behind compiling this is to compare the isolation levels offered by various Micro Front End strategies e.g. Webpack Module Federation. Our first candidate for embedding a micro front end was to use… Continue reading
-
How to use Webpack Module Federation for building Micro FrontEnds
Introduced in Webpack 5, it’s a powerful tool for micro frontend architecture. Module Federation allows you to create separate builds that form a single application. It enables dynamic loading and sharing of code and dependencies between different parts of your app at runtime. Let’s break it down. Setting Up a New Webpack Project: Create a… Continue reading
-
Managing Dependencies in an Isomorphic app with NPM Aliases
NPM package aliasing is a feature that allows developers to define custom names, or aliases, for their dependencies, lets you install packages under an aliased name to prvent naming collisions with your local modules. This also enables them to use a more intuitive or project-specific naming convention instead of relying on the package’s official name. Compatibility:… Continue reading
-
Understanding Packages – How to use and what each section means
In a typical package, you will also find a package.json file. A package.json file is a manifest file that’s used in projects based on Node.js. name: Indicates the name of the package and in this case, the name is @myorg/component. The @myorg/ part suggests that this package is a part of a larger project or organization named myorg. This scoped package… Continue reading
-
Why publish code in a pacakge
In the world of software development, code organization is key. One popular method of organizing code is through the use of packages. Publishing code in a package can also help with code reuse and consistency, which can be useful for organizations that have a lot of common functionality used across multiple projects. While packages offer… Continue reading
-
10 Mental Models to apply at engineering practices
Inspired by: twitter.com/MnkeDaniel/status/1687798167494897664 By applying these examples of principles to your front-end development work, you’ll develop a more strategic and thoughtful approach that leads to better user experiences and more effective solutions. You’ll be able to approach your projects more thoughtfully, make better design decisions, and create more efficient and effective user experiences. First Principle… Continue reading
-
React – Brief overview about Tree Walking
The “tree walking algorithm” typically refers to the process of navigating and manipulating the Document Object Model (DOM) tree. The DOM represents the structure of an HTML document as a tree, where each element (e.g., HTML tags) is a node in the tree. Modern web development often utilizes more efficient and1 specialized methods to interact… Continue reading
-
Webpack – Full Hash and Content Hash
During webpack bundling and chunking, you would often want the hash to change whenever you bump up the version in package.json. To factor in the package.json version while generating the fullhash for a file you can use the webpack DefinePlugin to pass the package.json version as a variable into your webpack build process. Here’s an… Continue reading
-
Developer’s cookbook – Isomorphic Layout Composer (ILC)
The Namecheap Isomorphic Layout Composer (ILC) is a tool for creating isomorphic web applications that can be easily scaled and adapted to different devices and screen sizes. ILC uses a flexible and modular approach to layout composition, allowing you to create reusable components and define your layout structure in a way that works for your… Continue reading