Abdul Basit’s Post

The Most Underrated Flutter Widget: StatefulBuilder https://lnkd.in/dKhja5uk

𝐃𝐨𝐧𝐭 𝐛𝐞 𝐥𝐢𝐤𝐞 𝐦𝐞, 𝐮𝐬𝐞 𝐆𝐍𝐔 𝐒𝐭𝐨𝐰 Using a customizable, text-based IDE is all fun and games until you `rm -rf` your configuration directory with no way of recovering it. I did just that over the weekend — twice! Ideally, we should have our configuration files (more commonly referred to as dotfiles) stored in a version control system. The issue is that our various applications often require their respective dotfiles to live at specific paths. To get around this, we can use symbolic links. Symlinks allow us to store a file that must be located at path A at path B instead. Our file can live at path B, and whatever edits made to the file at path B will automatically be updated at path A as well. However, managing this manually comes with its own set of footguns. This is where GNU Stow (officially branded as a symlink farm manager) comes in. Setting it up is easy once you get the hang of it. 1. Install GNU Stow using your favourite package manager 2. Create a ~/.dotfiles directory and initialize a Git repository inside  3. Create a ~/.dotfiles/.config directory 4. Move your existing configuration files into this newly created .config directory  5. Run `stow -t ~/.config ~/.dotfiles/.config` And just like that, now you can edit your configuration file, apply version control to them, and never lose them ever again. A small caveat: Stow is particular about the directory structure within the .dotfiles directory relative to the actual locations of these files in your home directory. Make sure that the structure inside .dotfiles mirrors the intended structure in your home directory.

For those who love IDE plugins that make our lives easier, I found this NPM Studio that allows us to install packages with a few clicks and even gives us update tips. It opens the package page on GitHub and even understands whether the project uses NPM or PNPM. Points to improve: It doesn't work as well with yarn. It freezes slightly when installing or uninstalling a package. https://lnkd.in/dzWtCWhs

𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗶𝗻𝗴 𝗧𝗮𝗯 𝗦𝘄𝗶𝘁𝗰𝗵𝗲𝗿 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝘂𝘀𝗶𝗻𝗴 React A 𝘁𝗮𝗯 𝘀𝘄𝗶𝘁𝗰𝗵𝗲𝗿 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 typically loads a new content or direct to a component page when the tab header is clicked. This component can also be implemented in a TreeView/NestedMenu component, where the parent in the tree serves as the tab header and the content/children be loaded at any click. Here, I used only a single state, 𝗖𝘂𝗿𝗿𝗲𝗻𝘁𝗧𝗮𝗯𝗜𝗻𝗱𝗲𝘅 implemented with the 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗵𝗼𝗼𝗸, to manage which tab was clicked and active. In my example, I used a parent and child component, where I passed down tab contents data from the parent to the child as props. See Tab Switcher in action below: Get the code on GitHub: https://lnkd.in/deHBSWFw

🌟 Introducing Onmi: Your Offline Node Module Installer! 🌟 Hey everyone, I'm excited to share a new package I developed called Onmi 📦. The name stands for "Offline Node Module Installer." While it's not the name I initially wanted 😐, it's the best available option, so here we go. 🚀 The Idea: Onmi simulates the [npm -i] or [npm -D] commands without needing an internet connection. Scenario: Imagine you have Project A with Express installed, and now you need to set up Project B with Express but there's no internet connection. This is where Onmi comes to the rescue! Command Example: bash ~$ onmi --install express --from ~/A --to ~/B Onmi will copy Express and all its dependencies from the node_modules of Project A to Project B. It also updates the package.json of Project B, adding Express to dependencies or devDependencies based on the -i or -D flag. ⚡️ Additional Features: You can install multiple modules simultaneously! Command Example: bash ~$ onmi -i sass -D gulp,gulp-sass -f ~/A -t ~/B And that's it! I would love to hear your thoughts and suggestions! 🙌 https://lnkd.in/eKC5h_nM

AppIgnition is a new Docker Desktop extension that offers a fully-featured development environment through containerization. Rather than having to build and configure your Dockerfiles, images, and containers yourself, AppIgnition already comes with several pre-configured containers to choose from. Save hours or days trying to find the right versions and configuration files for all of the software you need and get started building your next greatest idea in a matter of minutes!

WireSpy is here to level up your debugging game! 🚀 With WireSpy, easily inspect and modify your Livewire components. Time travel through changes and track events effortlessly. Give it a try and make debugging a breeze! Just use CMD+L/CTRL+L to toggle it on.

Notes App is built on Clean Architecture with a feature-based structure and MVI architecture presentation patterns. It implements dependency injection and leverages Clean Architecture and MVI for proper testing implementation, including Unit Tests, Integration Tests, and UI Tests. Techniques 🛠️ Kotlin (for Android development) Jetpack compose Dialog Navigation component Coroutines Flow Hilt (for dependency injection) Retrofit (for networking) Coil (for image loading) Room Database 📂 GitHub Link: https://lnkd.in/d2tQpP4k The app is explained in more detail on GitHub. I would be very happy if someone reviews the code, makes modifications, or discusses specific points

Day 88 (Late Post) of #100DaysOfCode: Making significant progress on the calculator project, but some function implementations remain. Struggling with bugs, particularly regarding the color palette not displaying correctly, possibly due to Chrome default settings. Determined to fix it soon! 💻🔧 #CodeProgress #BugFixing

🚀 Introducing multi-use-hooks: A Collection of Custom React Hooks 🚀 📢 Excited to announce the release of my new multi-use-hooks npm package, designed to make your React development process simpler, faster, and more efficient! With React development, we often find ourselves building the same utilities over and over again. To address this, I’ve bundled together 11 powerful custom hooks that cover a wide range of use cases—everything from fetching data to managing local storage, detecting hover states, and more. 💡 What's Inside? Here are some of the hooks included in the package: 1. useCounter: Manage counters with ease. 2. useDebounce: Debounce any value with minimal setup. 3. useFetch: A simple data-fetching solution. 4. useHover: Easily track hover states. 5. useIntersectionObserver: Detect when elements are in the viewport. 6. useLocalStorage: Interact with localStorage effortlessly. 7. useOnClickOutside: Detect clicks outside of a component. ... and many more! 🎯 Why Use multi-use-hooks? ⏱️ Save time by reusing common utilities. 📦 Reduce boilerplate code and increase focus on your app’s core functionality. 💻 Seamless integration with your existing React projects. Start using the hooks in your React apps and speed up your development workflow. 1. Install the package: npm install multi-use-hooks 🌍 Check out the full package here: npm https://lnkd.in/gQBTTVJh to multi-use-hooks 💬 I’d love to hear your thoughts! Feel free to try it out, share your feedback, or ask any questions. Github repo : https://lnkd.in/ge-jZtnE Aditya Kumar #react #javascript #opensource #webdevelopment #reacthooks #npm #frontenddevelopment #multiusehooks #fullstack