Year End Party 2020

Build Smarter: Best Practices for Creating Optimized Dockerfile

If you’ve been using Docker in your projects, you probably know how powerful it is for shipping consistent environments across teams and systems. It's time to learn how to optimize dockerfile. But here’s the thing: a poorly written Dockerfile can quickly become a hidden performance bottleneck. Making your images unnecessarily large, your build time painfully slow, or even causing unexpected behavior in production. I’ve seen this firsthand—from early projects where we just “made it work” with whatever Dockerfile we had, to larger systems where the cost of a bad image multiplied across services. My name is Bao. After working on several real-world projects and going through lots of trial and error. I’ve gathered a handful of practical best practices to optimize Dockerfile that I’d love to share with you. Whether you’re refining a production-grade image or just curious about what you might be missing. Let me walk you through how I approach Docker optimization. Hopefully it’ll save you time, headaches, and a few docker build rage moments 😅. Identifying Inefficiencies in Dockerfile: A Case Study Below is the Dockerfile we’ll analyze: Key Observations: 1. Base Image: The Dockerfile uses ubuntu:latest, which is a general-purpose image. While versatile, it is significantly larger compared to minimal images like ubuntu:slim or Node.js-specific images like node:20-slim, node:20-alpine. 2. Redundant Package Installation: Tools like vim, wget, and git are installed but may not be necessary for building or running the application. 3. Global npm Packages: Pages like nodemon, ESLint, and prettier are installed globally. These are typically used for development and are not required in a production image. 4. Caching Issues: COPY . . is placed before npm install, invalidating the cache whenever any application file changes, even if the dependencies remain the same. 5. Shell Customization: Setting up a custom shell prompt (PS1) is irrelevant for production environments, adding unnecessary steps. 6. Development Tool in Production: The CMD uses nodemon, which is a development tool, to run the application Optimized your Docker Image Here’s how we can optimize the Dockerfile step by step. Showing the before and after for each section with the result to clearly distinguish the improvements. 1. Change the Base Image Before: FROM ubuntu:latest RUN apt-get update && apt-get install -y curl && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \ apt-get install -y nodejs Use ubuntu:latest, a general-purpose image that is large and includes many unnecessary tools. After: FROM node:20-alpine Switches to node:20-alpine, a lightweight image specifically tailored for Node.js applications. Result: With the first change being applied, the image size is drastically reduced by about ~200MB.  2. Simplify Installed Packages Before: RUN apt-get update && apt-get install -y \ curl \ wget \ git \ vim \ python3 \ make \ g++ && \ curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \ apt-get install -y nodejs Installs multiple tools (curl, wget, vim, git) and Node.js manually, increasing the image size and complexity. After: RUN apk add --no-cache python3 make g++ Uses apk (Alpine’s package manager) to install only essential build tools (python3, make, g++). Result: The image should be cleaner and smaller after removing the unnecessary tools, packages. (~250MB vs ~400MB with the older version) 3. Leverage Dependency Caching Before: COPY . . RUN npm install Copies all files before installing dependencies, causing cache invalidation whenever any file changes, even if dependencies remain unchanged. After: COPY package*.json ./ RUN npm install --only=production COPY . . Copies only package.json and package-lock.json first, ensuring that dependency installation is only re-run when these files change.Installs only production dependencies (--only=production) to exclude devDependencies. Result: Faster rebuilds and a smaller image by excluding unnecessary files and dependencies. 4. Remove Global npm Installations Before: RUN npm install -g nodemon eslint pm2 typescript prettier Installs global npm packages (nodemon, eslint, pm2, ect.) that are not needed in production, increasing image size. After: Remove Entirely: Global tools are omitted because they are unnecessary in production. Result: Reduced image size and eliminated unnecessary layers. 5. Use a Production-Ready CMD Before: CMD ["nodemon", "/app/bin/www"] Uses nodemon, which is meant for development, not production. Result: A streamlined and efficient startup command. 6. Remove Unnecessary Shell Customization Before: ENV PS1A="💻\[\e[33m\]\u\[\e[m\]@ubuntu-node\[\e[36m\][\[\e[m\]\[\e[36m\]\w\[\e[m\]\[\e[36m\]]\[\e[m\]: " RUN echo 'PS1=$PS1A' >> ~/.bashrc Sets and applies a custom shell prompt that has no practical use in production After: Remove Entirely: Shell customization is unnecessary and is removed. Result: Cleaner image with no redundant configurations or layers. Final Optimized Dockerfile FROM node:20-alpine WORKDIR /app RUN apk add --no-cache python3 make g++ COPY package*.json ./ RUN npm install --only=production COPY . . EXPOSE 3000 CMD ["node", "/app/bin/www"] 7. Leverage Multi-Stage Builds to Separate Build and Runtime In many Node.js projects, you might need tools like TypeScript or linters during the build phase—but they’re unnecessary in the final production image. That’s where multi-stage builds come in handy. Before: Everything—from installation to build to running—happens in a single image, meaning all build-time tools get carried into production. After: You separate the "build" and "run" stages, keeping only what’s strictly needed at runtime. Result: Smaller, cleaner production imageBuild-time dependencies are excludedFaster and safer deployments Final Optimized Dockerfile # Stage 1 - Builder FROM node:20-alpine AS builder WORKDIR /app RUN apk add --no-cache python3 make g++ COPY package*.json ./ RUN npm install --only=production COPY . . # Stage 2 - Production FROM node:20-alpine WORKDIR /app COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app ./ EXPOSE 3000 CMD ["node", "/app/bin/www"] Bonus. Don’t Forget .dockerignore Just like .gitignore, the .dockerignore file excludes unnecessary files and folders from the Docker build context (like node_modules, .git, logs, environment files, etc.). Recommended .dockerignore: node_modules .git *.log .env Dockerfile.dev tests/ Why it matters: Faster builds (Docker doesn’t copy irrelevant files)Smaller and cleaner imagesLower risk of leaking sensitive or unnecessary files Results of Optimization 1. Smaller Image Size: The switch to node:20-alpine and removal of unnecessary packages reduced the image size from 1.36GB, down to 862MB. 2. Faster Build Times: Leveraging caching for dependency installation speeds up rebuilds significantly.Build No Cache:Ubuntu (Old Dockerfile): ~126.2sNode 20 Alpine (New Dockerfile): 78.4sRebuild With Cache (After file changes):Ubuntu: 37.1s (Re-run: npm install)Node 20 Alpine: 8.7s (All Cached) 3. Production-Ready Setup: The image now includes only essential build tools and runtime dependencies, making it secure and efficient for production. By following these changes, your Dockerfile is now lighter, faster, and better suited for production environments. Let me know if you’d like further refinements! Conclusion Optimizing your Dockerfile is a crucial step in building smarter, faster, and more efficient containers. By adopting best practices: such as choosing the right base image, simplifying installed packages, leveraging caching, and using production-ready configurations, you can significantly enhance your build process and runtime performance. In this article, we explored how small, deliberate changes—like switching to node:20-alpine, removing unnecessary tools, and refining dependency management—can lead to.

How to Create Smooth Navigation Transitions with View Transitions API and React Router?

Normally, when users move between pages in a web app, they see a white flash or maybe a skeleton loader. That’s okay, but it doesn’t feel smooth. Try View Transitions API! Imagine you have a homepage showing a list of movie cards. When you click one, it takes you to a detail page with a big banner of the same movie. Right now, there’s no animation between these two screens, so the connection between them feels broken. With the View Transitions API, we can make that connection smoother. It creates animations between pages, helping users feel like they’re staying in the same app instead of jumping from one screen to another. Smooth and connected transition using View Transitions API In this blog, you’ll learn how to create these nice transitions using the View Transitions API and React Router v7. Basic Setup The easiest way to use view transitions is by adding the viewTransition prop to your React Router links: import { NavLink } from 'react-router'; <NavLink to='/movies/avengers-age-of-ultron' viewTransition> Avengers: Age of Ultron </NavLink> Only cross-fade animation without element linking It works — but it still feels a bit plain. The whole page fades, but nothing stands out or feels connected. Animating Specific Elements In the previous example, the entire page takes part in the transition. But sometimes, you want just one specific element — like an image — to animate smoothly from one page to another. Let’s say you want the movie image on the homepage to smoothly turn into the banner on the detail page. We can do that by giving both images the same view-transition-name. // app/routes/home.tsx export default function Home() { return ( <NavLink to='/movies/avengers-age-of-ultron' viewTransition> <img className='card-image' src='/assets/avengers-age-of-ultron.webp' alt='Avengers: Age of Ultron' /> <span>Avengers: Age of Ultron</span> </NavLink> ); } // app/routes/movie.tsx export default function Movie() { return ( <img className='movie-image' src='/assets/avengers-age-of-ultron.webp' alt='Avengers: Age of Ultron' /> ); } // app.css ... /* This class assign to the image of the movie card in the home page */ .card-image { view-transition-name: movie-image; } /* This class assign to the image of the movie in the movie details page */ .movie-image { view-transition-name: movie-image; } ... Now, when you click a movie card, the image will smoothly grow into the banner image on the next page. It feels much more connected and polished. Animating a single element with view-transition-name Handling Dynamic Data  This works great for a single element, but what happens if you have a list of items, like multiple movies? If you assign the same view-transition-name to all items, the browser won’t know which one to animate. Each transition name must be unique per element — but hardcoding different class names for every item is not scalable, especially when the data is dynamic. Incorrect setup – Same view-transition-name used for all items in a list. The Solution: Assign view-transition-name during navigation Instead of setting the view-transition-name upfront, a more flexible approach is to add it dynamically when navigation starts — that is, when the user clicks a link. // app/routes/home.tsx export default function Home({ loaderData: movies }: Route.ComponentProps) { return ( <ul> {movies.map((movie) => ( <li key={movie.id}> <NavLink to={`/movies/${movie.id}`} viewTransition> <img className='card-image' src={movie.image} alt={movie.title} /> <span>{movie.title}</span> </NavLink> </li> ))} </ul> ); } // app/routes/movie.tsx export default function Movie({ loaderData: movie }: Route.ComponentProps) { return ( <img className='movie-image' src={movie.image} alt={movie.title} /> ); } // app.css ... /* Assign transition names to elements during navigation */ a.transitioning .card-image { view-transition-name: movie-image; } .movie-image { view-transition-name: movie-image; } ... Final output – Smooth transition with dynamic list items Here’s what happens: When a user clicks a link, React Router adds a transitioning class to it.That class tells the browser which image should animate.On the detail page, the image already has view-transition-name: movie-image, so it matches. This way, you can reuse the same CSS for all items without worrying about assigning unique class names ahead of time. You can explore the full source code below: Live DemoSource on GitHub Browser Support The View Transitions API is still relatively new, and browser support is limited:  Chrome (from version 111)Edge (Chromium-based)Firefox & Safari: Not supported yet (as of May 2025) You should always check for support before using it in production. Conclusion The View Transitions API gives us a powerful tool to deliver smooth, native-feeling page transitions in our web apps. By combining it with React Router, you can: Enable basic transitions with minimal setupAnimate specific elements using view-transition-nameHandle dynamic content gracefully by assigning transition names at runtime Hope this guide helps you create more fluid and polished navigation experiences in your React projects!

Anh Duong – A Journey of Rising Above to Shine Bright

At SupremeTech, we often meet during meetings, rush through deadlines together, and celebrate when our products are released. But behind those intense work hours, there are powerful stories of personal transformation & growth that we don’t always get to hear. ST is not only a witness to these journeys but also a part of them. In May, during our ST WOW section—a time where we honor people who make others say “WOW,” not only in work but also in life—we recognized Anh Duong. Duong has been with SupremeTech for four years and has gone through an impressive personal transformation. Let’s explore his story together! From a Shy Boy to the Confident Anh Duong Today Just over two years ago, Duong often felt insecure, especially about his appearance. He was skinny and had trouble even carrying water bottles around the office. He often felt tired and weak due to poor health. These little moments slowly pushed him to make a change, not to impress others, but to take control of his life. He started going to the gym in April 2023. At first, it was just something to try out. When the numbers on the scale didn’t move, he felt discouraged. But instead of giving up, that became a turning point. He chose discipline. He chose daily habits. He set long-term goals. Day by day, these choices built into something bigger—not just in how he looked, but in how he felt. No Trainer, No Showing Off – Just Self-Understanding Duong didn’t have a personal trainer. There was no magic solution. He studied on his own to learn what worked for his body—what foods, exercises, and routines suited him best. He designed his own meals, workouts, and rest schedule. Not to meet someone else’s standards, but to fit what he truly needed. Now that he’s “in shape,” his training is no longer a challenge—it’s just part of a healthy lifestyle. Success Measured by Spirit, Not Muscles After one year, Duong said his energy had improved significantly. He rarely feels drained now. People around him notice he’s more cheerful and full of life. And after two years? He says it’s a turning point—he truly feels proud of what he has achieved with his body. Now, he’s more confident. He’s in a relationship. His family is proud. And most importantly, he inspires others who once felt the same way. “You won’t know until you try. Don’t work out to show off—do it to change yourself.”Nguyen Van Anh Duong That’s Duong's message to anyone who feels unsure, insecure, or not strong enough to start. At ST, we’re proud to have people like Anh Duong—not just skilled at work, but also strong in their personal lives. We believe going far takes not only skills but also willpower. It’s not just about working together, but also living and growing together. Thank you, Anh Duong, for your personal transformation effort and for being a warm and strong light in our ST family. Related articles: From Unpaid Trial to the Top: The Inspiring Rise to Vice PresidentFrom Seeking The Path to Leading The Way: Phuoc’s Journey at SupremeTech

Philippines Business Trip Report: Seminars and School Visits for BA Recruitment

This time, SupremeTech embarked on our very first BA business trip to the Philippines! We visited two cities: Baguio, known for its high altitude, cool climate, and popularity as a study-abroad destination, and Cebu, a well-known tourist spot. Our itinerary consisted of four days in Baguio and three days in Cebu, totaling one week. The primary purposes of this BA business trip were: Visiting language schools for our recruitment of Japanese Business Analysts (BA).Hosting a career seminar for Japanese students interested in working abroad. Through direct conversations with language school staff and students, we gained valuable insights into their genuine concerns and aspirations. It was a truly eye-opening and enriching experience for us. Currently, many students return to Japan for domestic employment after studying abroad, often unable to fully leverage their global mindset. Additionally, when people consider working abroad, they usually look to English-speaking countries, such as Australia or Canada, while opportunities in ASEAN countries—especially emerging economies like Vietnam—remain relatively underexplored. During this BA business trip, our goal was to introduce “working in ASEAN” as a viable career option to language school students and staff, and to encourage them to view their time abroad not just as a study period, but as a stepping stone to a global career. We hope this BA business trip served as a meaningful first step toward expanding their future possibilities. Introducing SupremeTech and the Role of Business Analysts (BA) SupremeTech is a technology company based in Da Nang, Vietnam, specializing in web service development and AI applications. Our core business revolves around offshore development, connecting Japanese clients with talented Vietnamese engineering teams. Among our team, the role of a Japanese BA is especially crucial. BA does more than just translate language; they carefully listen to clients’ needs, organize those requirements into clear specifications, and communicate them effectively to the development team. In essence, they act as a vital bridge between clients and engineers. This role requires not only language skills but also strong logical thinking, cross-cultural understanding, and flexible communication abilities. Many of the Japanese BA thriving at SupremeTech have studied English at language schools in the Philippines. They leverage the skills they gained during their language studies to tackle challenges and build careers in Vietnam. However, it’s also common for language students to return to Japan after their studies and choose domestic employment instead. The international mindset and valuable experience gained through studying abroad in the Philippines can be put to even better use, and our company offers a field where those strengths truly shine. Bringing “Working Abroad” Closer to Everyone The key message we wanted to convey in our seminar was that working overseas in IT companies is not just for a special few—it’s something anyone can pursue. We heard many concerns from both school staff and students, such as: “I’m worried whether my English skills are good enough.”“Can I take on this challenge even without prior industry experience?” What we truly value is not how much skill or experience you have right now, but whether we can grow together moving forward. Nobody is perfect.At the same time, emerging countries like Vietnam offer an environment that allows you to take on new challenges flexibly.We strongly believe that those who are willing to try have the most excellent chances. During the seminar, we shared genuine stories from Japanese people currently working on-site, detailed explanations of the work itself, and the skills required. We hope this helped make the idea of working abroad feel a little more realistic and achievable. Studying abroad is not the goal—it’s just the beginning.We look forward to continuing to explore the career possibilities beyond language study, together. Insights from Our Conversations with Students Through our interactions with language school staff and students who attended our seminar, we came to realize the following: Many people are interested in working abroad, but find it challenging to take the first realistic step.There is a lack of information and opportunities to trigger action.Many of them are seriously focused on their future, and we felt great potential in each one of them. For those who are thinking, “I want to change something” or “I want to take a step forward,”We sincerely hope that this seminar and these conversations have helped give them a little push in the right direction. There is nothing more rewarding than that for us. Why Vietnam? – From the Frontlines of Offshore Development You might be wondering, “Why Vietnam?” or “What’s it like to do offshore development there?” Here are the three main reasons why we have chosen Vietnam as our base: A Practical Solution for Global IT Talent ShortagesWith Japan facing a serious shortage of IT professionals, offshore development with Asian countries has been expanding rapidly. Among them, Vietnam stands out due to its strong compatibility with Japanese business culture, offering a great balance of technical skills, cost efficiency, and talent availability.A Market Full of Opportunities for Young Professionals Vietnam has a relatively young population, with approximately 60% of its population under the age of 35. Its rapidly growing IT market provides many opportunities for young talent to gain hands-on experience early in their careers.Comfort and Cultural Familiarity Vietnam is just two hours ahead of Japan, making communication and coordination easier. The cost of living is relatively affordable, and the culture is friendly and welcoming to Japanese people. Our base city, Da Nang, is renowned for its tranquil environment, surrounded by mountains and the sea, offering a perfect balance between work and personal life. Conclusion This BA business trip and seminar were a significant challenge for us as well. By visiting language schools on-site and directly engaging with students, we gained valuable insights, new learnings, and important connections. We plan to leverage this valuable experience in our future recruitment efforts and continue to nurture strong relationships with language schools. Our key messages remain:“Working overseas isn’t just for special people — anyone can give it a try.” “Opportunities to take on new challenges are often closer than you think.” We will continue to share these messages and deepen our collaboration with schools. We also look forward to future visits and new challenges. We hope to visit the Philippines and interact directly with language school staff and students once again. Above all, we sincerely wish that the connections made during this BA business trip will become a new stepping stone for someone’s career journey. Through these activities, we hope more people will engage with our company and, in the future, become our colleagues. If you are interested in the role of BA or an overseas career, please check out [our recruitment information here].If you'd like to learn more or discuss whether this path is right for you, we also offer casual online meetings. We’re cheering you on as you take on new challenges. Gallery Bagauio API BECI (EOP campus) Our first visit was to API BECI, located on a lush, green hillside. We were impressed by the campus’s clean and well-maintained facilities, which beautifully blend the open, relaxing atmosphere of a resort with a focused, structured learning environment. We discussed the possibility of future collaboration with the student manager. JIC (Premium campus） We had the opportunity to visit JIC’s Premium Campus, nestled in a peaceful, green environment. The campus is spacious and well-equipped with convenient facilities such as a café, gym, and convenience store. The cafeteria, in particular, offered a spacious and open atmosphere with an excellent view. We also enjoyed a buffet-style meal there, which exceeded our expectations in both taste and quantity. Amidst this resort-like comfort, students were highly focused on their studies. JIC offers a variety of unique programs tailored to different levels, goals, and budgets at each of its campuses, and is known for its original curriculum and materials. During our visit, we also had positive discussions with the local team about the possibility of future collaboration on an English × IT learning program, and we’re excited about the potential opportunities that lie ahead. PINES (main campus) Our final stop in Baguio was PINES, one of the well-known language schools. Founded in 2001, the school relocated to a new campus in 2018, providing an even more comfortable and study-friendly environment. The campus is about a 10-minute drive from SM City Baguio, the city’s largest shopping mall, and is surrounded by nature, with lush parks just a short walk away. The school offers a fully integrated environment where classrooms and dormitories are housed in the same building, eliminating the need for commuting. It also features well-equipped shared spaces such as a gym and student lounge, ensuring a comfortable living experience. What stood out to us during the visit was the calm, focused atmosphere throughout the campus. It’s designed for serious learning. Many students are working professionals or individuals preparing for a career change, and we were particularly impressed by their strong sense of purpose and career motivation. CEBU B CEBU Our final visit was to B’Cebu, a language school newly established in 2023 on Mactan Island, Cebu. This promising new campus was founded as a sister school to API BECI, a well-established school with over 20 years of experience in Baguio. Upon arrival, we were immediately struck by the open and refreshing resort-like atmosphere of the campus! The clean and modern school buildings and dormitories are complemented by a full range of lifestyle facilities, including a gym, café, and convenience store, creating an uplifting environment just by being there. In contrast to the calm and focused study atmosphere in Baguio, B’Cebu offers a unique style of study abroad that perfectly blends the relaxed resort vibe, engaging activities, and language learning. A fascinating discovery was the chance to speak directly with the Korean owner. We learned that B’Cebu is part of a group that also operates B’Hoian in Hoi An, Vietnam. Given its geographical proximity to Danang, where our company is based, this connection opens up promising opportunities for future collaboration. Remarkably, the campus even features a dedicated diving pool! Students can obtain diving certification if they want, providing a unique combination of English language learning and resort experience. Meals are served buffet-style, offering a rich variety of options catering to the diverse international students. We had the chance to try the dish ourselves and found it delicious, so much so that it was hard not to eat too much! Curious World Academy (CWA） Our last stop was Curious World Academy. Although the visit was planned on short notice, we had a productive meeting with the manager and toured the school. We got a clear idea of the school’s atmosphere. The school is still relatively new, but it has already gained popularity due to its modern facilities and practical programs. The campus feels calm and focused — a great place for students who want to study seriously but also have time to relax. There’s a swimming pool and other nice facilities, which help students stay comfortable and learn well. Many students are young and seem very serious about their future. This visit gave us great hope and some excellent ideas for the future. Seminar - PINES