When I first started learning Go, I thought I was doing everything right—until I ran into a weird bug about golang range loop reference. I was iterating over a list of Book structs (of course, I can't share the real structs and code used here... all here are for turorial purpose), taking the pointer of each one, and storing them into a slice. But at the end of the loop, all the pointers pointed to... the same book?! 🤯 Let’s walk through this classic Go beginner mistake together — and fix it the right way. 📚 The Use Case: A Slice of Books in a Library Suppose we have a list of books, and we want to collect pointers to each one so we can modify them later. Here’s the code I thought would work: for _, book := range books { bookPointers = append(bookPointers, &book) // Oops... } But when I printed out the pointers, they all pointed to the last book in the list. This bug stumped me for a while until I understood one critical Go behavior. The File Structure To Run The Code learning-golang/ ├── 01-loop-reference-pitfall/ │ ├── main.go │ └── README.md ├── Makefile ├── bin/ └── go.mod This is the complete buggy code: package main import ( "fmt" ) type Book struct { Title string Author string } func main() { originalBooks := []Book{ {"Go in Action", "William Kennedy"}, {"The Go Programming Language", "Alan Donovan"}, {"Introducing Go", "Caleb Doxsey"}, } fmt.Println("❌ Buggy Version:") var buggyPointers []*Book for _, book := range originalBooks { buggyPointers =…

The Problem: Too Much Dust on Old Photos, I need "Remove Duplicate Photos" cleaner Imagine sifting through tens of thousands of photos—manually. I mounted the NAS SMB partition on my MacBook, only to discover it was excruciatingly slow. After two days of copying files to my MacBook, my manual review session turned into a blur. My eyes hurt, my patience wore thin, and I knew there had to be a better way. When I turned to existing tools for "remove duplicate photo" task, I hit a wall. Most were paid, overly complex, or simply didn’t fit my needs. Even the so-called free solutions required learning arcane commands like find. I needed something powerful, flexible, and fast. And when all else fails, what’s a tech enthusiast to do? Write their own solution—with a "little" help from ChatGPT. The Power of ChatGPT I’d dabbled with the same task scripting years ago but quickly gave up because of the time it required. Enter ChatGPT (no marketing here... I am a paid user though...), the real hero of this story. With its assistance, I wrote the majority of the script in less than a day before i gave up ! But anyway, of course, I still have to thank the emergence of Large Language Models! Based on the current code volume and quality, without 10 to 15 days, a single person would absolutely not be able to achieve the current results! So, I believe LLMs have helped me improve my efficiency by at least 10 times! And they've helped me avoid all sorts of…

The Font Problem in VSCode After done the configuration in Terminal Mastery: Crafting A Productivity Environment With ITerm, Tmux, And Beyond, we got a nice terminal: However, after I installed VSCode, the terminal couldn't display certain glyphs, it looks like this: The Fix We need to fix it by updating the font family in VSCode. 1. Identify the name of font family. Open Font Book on Mac, we can see: The font supports those glyphs is "MesloLGM Nerd Font Mono", that's also what I configured for iTerm2. 2. Go to VSCode, go to Command + comma, go to settings, search "terminal.integrated.fontFamily", set the font name as below: 3. Now we can see it displays correctly:   Well done!

I love working on Linux terminals Rewind a decade or so, and you'd find me ensconced within the embrace of a Linux terminal for the duration of my day. Here, amidst the digital ebb and flow, I thrived—maneuvering files and folders with finesse, weaving code in Vim, orchestrating services maintenance, decoding kernel dumps, and seamlessly transitioning across a mosaic of tmux sessions. The graphical user interface? A distant thought, unnecessary for the tapestry of tasks at hand. Like all geeks, every tech enthusiast harbors a unique sanctuary of productivity—a bespoke digital workshop where code flows like poetry, and ideas ignite with the spark of creativity. It’s a realm where custom tools and secret utilities interlace, forming the backbone of unparalleled efficiency and innovation. Today, I'm pulling back the curtain to reveal the intricacies of my personal setup on Mac. I invite you on this meticulous journey through the configuration of my Mac-based development sanctuary. Together, let's traverse this path, transforming the mundane into the magnificent, one command, one tool, one revelation at a time. iTerm2 After account setup on Mac, the initial terminal looks like this when I logged in: Let's equip it with iTerm2! What is iTerm2? iTerm2 is a replacement for Terminal and the successor to iTerm. It works on Macs with macOS 10.14 or newer. iTerm2 brings the terminal into the modern age with features you never knew you always wanted. Why Do I Want It? Check out the impressive features and screenshots. If you spend a lot of time in a terminal, then you'll appreciate all the…

Hey there! Recently, I encountered some encoding issues. Then I realized that, looks like I haven't seen any articles give a crispy yet interesting explanation on Base64/Base64URL/Base32 encoding! Ah! I should write one! So, grab your gear, and let's decode these fascinating encoding schemes together! The Enigma of Base64 Encoding Why do we need Base64? Imagine you're sending a beautiful picture postcard through the digital world, but the postal service (the internet, in this case) only handles plain text. How do you do it? Enter Base64 encoding – it's like magic that transforms binary data (like images) into a text format that can easily travel through the internet without getting corrupted. Base64 takes your binary data and represents it as text using 64 different characters: In more details, it will: It's widely used in email attachments, data URLs in web pages, and anywhere you need to squeeze binary data into text-only zones. A simple text like "Hello!" when encoded in Base64, turns into "SGVsbG8h". Usage of Base64 in Data URIs Data URIs (Uniform Resource Identifiers) offer a powerful way to embed binary data, such as images, directly into HTML or CSS files, using Base64 encoding. This method eliminates the need for external file references, resulting in fewer HTTP requests and potentially faster page loads. Here's how it works in practice: Embedding an Image in HTML Using Data URI Let's say you have a small logo or icon that you want to include directly in your HTML page without linking to an external file. You can use Base64 to encode the…

Greetings Hi there! I was trying some new stuff about VUE recently. I downloaded a free version of VUE Argon dashboard code and tried to compile it locally. It's straghtforward: Then I got the dist folder: Interesting... Then I double clicked the index.html, expecting it will display the beautiful landing page, but it didn't happen... This is strange... What went wrong? I tried npm run serve, it works well, I can see the portal and navigate between pages without issues. I must fix this! Should be quick! Bingo! The root cause is that the VUE project used router with createWebHistory instead of createWebHashHistory! It resulted a differenve ways to handle static assets and routing. Using createWebHistory in Production environment is required as it provides several significant benefits: I just want to use createWebHashHistory in my local development environment. The fix Now, the fix is easy. First, modify scripts in package.json to specify mode for serve and build, and I added two new items serve_prod and build_dev: Second, creating or editing vue.config.js as below: Lastly, update src/router/index.js to handle the mode accordingly: The original code was: Now it looks like this: Now, run npm run build_dev again, I can see the portal 😎 Thanks for reading! Have a good day! Thanks for reading! Have a good day!

The Background... I have Django/Vue development environment running locally. To streamline my Django development, I typically open six tmux windows 😎 : I used one Tmux session to hold all above. However, my laptop sometimes needs to reboot, after reboot, all of my windows are gone 😓 I have configured tmux-resurrect and tmux-continuum to try to handle this scenario, but they couldn't re-run those commands even they could restore the windows correctly. Let me show you the screenshots. The problem... Typically, my development windows look like this: As you see, the services are running within the respective windows. If I save them with tmux-resurrect, after reboot, of course tmux-resurrect and tmux-continuum could restore them, but services and all environment variables are gone. To simulate, let me kill all sessions in tmux, check the output: Now start tmux again, here are the status I can see, tmux restored the previous saved windows: Let's check the window now: None of the services is running 🙉 The Complain... As the supreme overlord of geekcoding101.com, I simply cannot let such imperfection slide. Not on my watch. Nope, not happening. This ain't it, chief. Okay, let's fix it! The Fix... .... Okay! I wrote a script.. oh no! Two scripts! One is called start_tmux_dev_env.sh to create all windows, it will invoke prepare_dev_env.sh which export functions to initialize environment variables in specific windows. A snippet of start_tmux_dev_env.sh: The prepare_dev_env.sh looks like: The End... Now, after reboot, I can just invoke script start_tmux_dev_env.sh and it will spin up all windows for me in seconds! I'M Really Pround…

Hey! In my career, I haven't spent much time on front-end programming. However, I had it now!It's a really exciting journey learning Angular/Karma/Jasmine and I feel like I will probably spent more time on it to gain more depth insights! Today's article is my learning journey on this, hope you will find it as a great tutorial ^^ Introductions Angular Testing Utilities Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. Angular testing utilities provide you a library to create a test environment for your application. Classes such as TestBed and ComponentFixtures and helper functions such as async and fakeAsync are part of the @angular/core/testing package. Getting acquainted with these utilities is necessary if you want to write tests that reveal how your components interact with their own template, services, and other components. Ref Links Karma Karma is a tool that lets you test your application on multiple browsers.Karma has plugins for browsers like Chrome, Firefox, Safari, and many others.But I prefer using a headless browser for testing.A headless browser lacks a GUI, and that way, you can keep the test results inside your terminal. Ref Links Jasmine Jasmine is a popular behavior-driven testing framework for JavaScript. With Jasmine, you can write tests that are more expressive and straightforward. Here is an example to get started: Ref Links Steps Environment New An Angular Project The developers at Angular have made it easy…

Hi there! Welcome to geekcoding101.com! I have two decades years of working experiences on Linux. There are many things I have come across, but I want to say, building package for Linux is something you couldn't avoid at all in your work or study! I have summarized the steps/tricks in this article, hope you will find it useful! Enjoy! Create unsigned rpm I will first demonstrate how to create unsigned rpm. Create Folder Structure First step is creating folder structure. If you don't specify top_dir in ~/.rpmmacros (It's a config file), then it will use ~/rpmbuild by default Create SPEC file for unsigned rpm Now we can work on the spec file SPECS/rpm-no-sig.spec: Create a dummy source file for unsigned rpm Use a dummy py file to be packed into the rpm: rpm-helper-unsigned.py: Create a folder: mkdir <rpm-name>-<version> For example: Then put rpm-helper-unsigned.py under it. Then make gz file for the folder: You will get file rpm-no-sig-1.0.tar.gz. Move it to SOURCES folder. When building rpm, it will recognize this gz file and extract it automatically. Build rpm-no-sig.rpm Run command: rpmbuild -ba SPECS/rpm-no-sig.spec Example: You will get RPMS/noarch/rpm-no-sig-1.0-1.noarch.rpm Check MD5: rpm -Kv <rpm file> Example: Backup this rpm to somewhere else. Create signed rpm Create SPEC file for signed rpm The spec file SPECS/rpm-with-sig.spec: Create a dummy source file for signed rpm Use a dummy py file to be packed into the rpm: rpm-helper-signed.py. You can just reuse the one in above and change the print message accordingly. Create a folder: cd ~ && mkdir <rpm-name>-<version> Example: cd ~ && mkdir rpm-with-sig-1.0 Move rpm-helper-signed.py into the folder. Also create the gz file with same process. Example: You will…

Hi there! Today I'd like to share you my notes about tmux! Tmux is my favorite terminal multiplexer! Several years ago I didn't give a **it for people using it! Because I thought that might consume too much of my time to customize. However, one day I was free, then tested the water! I feel like I couldn't live without it in my coding environment! It likes Vim, the learning curve is steep, but once you're comfortable with it, you will addict to it! No more talking, let's dive into it! Introduction It’s tmux, a so-called terminal multiplexer. Simply speaking, tmux acts as a window manager within your terminal 1 and allows you to create multiple windows and panes within a single terminal window. Pane Shortcut Comment Pre % Splitting panes in left and right Pre " Splitting panes in top and bottom Pre <arrow key> Navigating in panes C-d Close panes Pre: swap-pane -s <sid> -t <tid> Swap sid pane to tid pane Pre z Make a pane go full screen, vice versa Pre C-<arrow key>Pre ⌥-<arrow key> Resize pane in direction of Windows Shortcut Comment Pre c Create a new window Pre , Rename current window Pre x Close current window with prompt and deattach Sessions Shortcut Comment Pre :new -s <name> Create a new session Pre C-c Create a new session Pre $ Rename current session Pre s, then x on the session Delete the selected session Configuration This is the folder of configuration: ~/.tmux. This is the configuratino file: ~/.tmux.conf Session Handling Search Pluggins I haven't explored much…