Explore all articles in Software Development

Back/Forward Cache, Hiện Đại Hay Hại Điện?

Mục Lục Back/forward cache là gì?Nhận biết một trang được lưu, khôi phục từ back/forward cache.Tối ưu hóa cho back/forward cache bằng Chrome DevToolsNhững tác động của back/forward cache đối với trang web Đã bao giờ bạn gặp trường hợp giống thế này chưa? Bạn đang làm một website bán hàng. Khi người dùng đang ở trang thanh toán và đã điền đầy đủ thông tin tài khoản ngân hàng, tiếp theo họ chuyển đến trang giỏ hàng để cập nhật, sau đấy họ lại điều hướng trở lại trang thanh toán. Trên một số thiết bị, trang thanh toán sẽ được tải lại với form chứa thông tin tài khoản thanh toán được làm mới, nhưng trên một số thiết bị khác thì không, khi người dùng nhấp vào nút quay lại của trình duyệt, trang web trước đó sẽ không mất thời gian để tải lại mà nó sẽ xuất hiện ngay lập tức với những thông tin nhạy cảm mà người dùng đã nhập. Trên các thiết bị này, trang web đã được khôi phục từ một loại bộ nhớ đệm của trình duyệt có tên gọi là Back/forward cache. Trong vài trường hợp, việc lưu trữ nội dung của một trang web, để giúp người dùng có thể điều hướng trở lại ngay lập tức, mà không mất thời gian để tải lại như lúc ban đầu là một tính năng rất hay, hữu ích. Nhưng trong một số trường hợp khác, đấy cũng có thể trở thành bug. Back/forward cache là gì? Back/forward cache ( gọi tắt là bfcache) là một loại bộ nhớ đệm, giúp tối ưu hóa trình duyệt cho phép điều hướng quay lại và chuyển tiếp ngay lập tức. Nó cải thiện đáng kể trải nghiệm duyệt web cho người dùng — đặc biệt là những người có mạng hoặc thiết bị chậm hơn vì nó giúp trình duyệt có thể tải lại trang web trước đó mà không cần phải tải lại tài nguyên. Phát hiện một trang được khôi phục từ bfcache. Sự kiện pageshow được kích hoạt ngay sau sự kiện load khi trang web đang tải lần đầu và bất kỳ lúc nào trang được khôi phục từ bfcache. Sự kiện pageshow có một thuộc tính là persisted, nó sẽ có giá trị là true nếu trang được khôi phục từ bfcache (và ngược lại là false nếu không). Vì vậy, bạn có thể sử dụng thuộc tính persisted này để phân biệt trang được tải thông thường với trang được khôi phục từ bfcache. Ví dụ: window.addEventListener('pageshow', (event) => { if (event.persisted) { console.log('Trang web nay duoc khoi phuc tu bfcache.'); } else { console.log('Trang web nay duoc tai xuong binh thuong.'); } }); Nhận biết một trang có thể được đưa vào bfcache Ngược lại với sự kiện pageshow ta cũng có sự kiện pagehide. Sự kiện pagehide này sẽ được kích hoạt khi trang được tải xuống bình thường hoặc khi trình duyệt cố gắng đưa nó vào bộ nhớ đệm bfcache. Sự kiện pagehide này cũng có một thuộc tính là persisted. Nếu giá trị của nó là false thì bạn có thể chắc chắn rằng một trang sẽ không được đưa vào bfcache. Tuy nhiên, nếu giá trị của thuộc tính này là true, nó không đảm bảo rằng một trang chắc chắn sẽ được lưu vào bộ nhớ đệm đâu nhé. Nó chỉ mang ý nghĩa là trình duyệt dự định lưu trang đấy vào bộ nhớ bfcache mà thôi, nhưng có thể có các yếu tố khiến nó không thể làm như vậy. window.addEventListener('pagehide', (event) => { if (event.persisted) { console.log('Trang web nay *co the* duoc dua vao bfcache.'); } else { console.log('Trang web nay khong duoc dua vao bfcache.'); } }); Tối ưu hóa cho bfcache bằng Chrome DevTools Bộ nhớ đệm bfcache đã có trên tất cả các trình duyệt web phổ biến hiện nay nhưng hiện chỉ có Chrome là có cung cấp cho chúng ta công cụ để kiểm tra mà thôi. Công cụ dành cho nhà phát triển của Chrome có thể giúp bạn kiểm tra các trang của mình để đảm bảo chúng được tối ưu hóa cho bfcache và xác định bất kỳ vấn đề nào có thể khiến chúng không đủ điều kiện. Để kiểm tra một trang cụ thể, hãy điều hướng đến trang đó trong Chrome và sau đó trong DevTools, đi tới Application > Back/forward cache. Tiếp theo, nhấp vào nút Run Test và DevTools sẽ cố gắng điều hướng và quay lại để xác định xem trang có thể được khôi phục từ bfcache hay không. Nếu không thành công, bảng điều khiển sẽ cho biết trang không được khôi phục và liệt kê lý do tại sao. Nếu lý do là điều mà bạn với tư cách là nhà phát triển có thể giải quyết, thì lý do đó cũng sẽ được chỉ ra. Cập nhật hoặc xóa dữ liệu sau khi trang web được khôi phục bfcache Trở lại với vấn đề mà mình đặt ra ở đầu bài viết này. Nếu trang web của bạn lưu giữ trạng thái người dùng — đặc biệt là bất kỳ thông tin nhạy cảm nào của họ — thì dữ liệu đó cần được cập nhật hoặc xóa sau khi một trang được khôi phục từ bfcache. Một ví dụ khác, thường gặp hơn là nếu người dùng đăng xuất khỏi trang web trên máy tính công cộng và người dùng tiếp theo nhấp vào nút quay lại. Điều này có thể làm lộ dữ liệu riêng tư mà người dùng cho rằng đã bị xóa sau khi họ đăng xuất. Để tránh những trường hợp như thế này, có một vài trick có thể ngăn trang được đưa vào bfcache nhưng vẫn sẽ có những ngoại lệ, vậy nên tốt hơn hết là bạn nên luôn cập nhật lại trang sau một sự kiện pageshow nếu như event.persisted có giá trị là true. Đoạn mã sau sẽ kiểm tra sự hiện diện của cookie dành riêng cho trang web trong sự kiện pageshow và tải lại nếu không tìm thấy cookie: window.addEventListener('pageshow', (event) => { if (event.persisted && !document.cookie.match(/my-cookie/)) { // Bat buoc tai lai trang neu nhu nuoi dung da dang xuat. location.reload(); } }); Thống kê lượt truy cập trang web có sử dụng bfcache Như đã giới thiệu ở phần trên, nếu một trang web được khôi phục từ bfcache thì nó sẽ không tốn tài nguyên, dữ liệu mạng, điều đó cũng đồng nghĩa với việc trang web đó đã bị mất đi một lượt truy cập nếu bạn theo dõi lượt truy cập vào trang web của mình bằng các công cụ phân tích vì hầu hết các thư viện công cụ phân tích phổ biến không theo dõi khôi phục bfcache dưới dạng số lần xem trang mới. Vậy nên, nếu bạn không biết/lường được vấn đề này thì việc giảm lưu lượng truy cập, lượt xem do bfcache gây ra sẽ ít nhiều có ảnh hưởng không tốt đến việc xếp hạng trang web của bạn, mặc dù nó giúp tăng trải nghiệm của người dùng. Nếu bạn không muốn số lần xem trang của mình giảm xuống do trình duyệt bật bfcache, bạn có thể báo cáo số lần khôi phục bfcache dưới dạng số lần xem trang (được khuyến nghị) bằng cách lắng nghe sự kiện pageshow và kiểm tra thuộc tính persisted. Ví dụ sau đây cho thấy cách thực hiện việc này với Google Analytics ( logic cũng tương tự đối với các công cụ phân tích khác ) : // Gui mot luot xem khi trang duoc tai lan dau tien. gtag('event', 'page_view'); window.addEventListener('pageshow', (event) => { // Gui mot luot xem khi trang duoc khoi phuc tu bfcache. if (event.persisted) { gtag('event', 'page_view'); } }); Tổng kết Cái gì cũng có giá trị của nó, cũng có tồn tại những ưu và nhược điểm, bfcache cũng không ngoại lệ. Việc quay lại một trang trước đó mà không phải tải lại từ đầu là một tính năng rất hữu ích, không chỉ giúp tăng tốc độ điều hướng mà còn giảm việc sử dụng dữ liệu, vì trình duyệt không cần phải tải lại tài nguyên. Điều này giúp tăng trải nghiệm của người dùng đáng kể nhưng nó cũng tiềm ẩn rủi ro về bảo mật dữ liệu cá nhân, làm giảm lượt truy cập trang trực tuyến và một số vấn đề khác nữa. Điều quan trọng là bản thân người lập trình viên phải biết và kiểm soát được nó trong từng trường hợp, vì nếu không, trong một số trường hợp, tính năng cũng có thể sẽ trở thành bug. Bài viết này không chỉ dành cho các lập trình viên tham khảo mà ngay cả các tester cũng có thể đưa vào trong test case của mình đặc biệt là trong các trang web có yêu cầu yếu tố bảo mật hoặc những trang có dữ liệu thường xuyên thay đổi. Hi vọng bài viết này của mình hữu ích đối với các bạn. Đừng quên share và gắn bookmark cho bài viết này để tiện xem lại sau này nhé 😉 ! Tài liệu tham khảo Exploring a back/forward cache for ChromeBrowser Back/Forward Button History Navigation Cache (bfcache)Performance Game Changer: Browser Back/Forward Cache

Collaboration Between PM & BA

As you might know, Project Manager & Business Analyst are key players in every project. To understand why their collaboration is the most important part of the project. And how to make a good partnership between them? Let’s dive in. Firstly, have a look at basic terms: Project & Product? Project is temporarily formed to create a productProduct is something that delivers value. For example, a car, a tool, a software … Project & Product Goals The goal of the project is to finish on time, within cost, and provide the right product.The right product must be valuable and meet business and customer needs.It’s actually the same as the picture below You can see, those factors are constraints and we need people to manage/maintain them, it's time to involve Project Manager & Business Analyst in. Project Manager & Business Analyst PM is responsible for Time: making the schedule for the whole project base on the Scope, defining processes, managing Costs before and during the development phase, guiding others to perform the best, and keeping the project on track in any situation.BA is mainly focusing on business needs and providing the proper functionalities that meet all requirements, working with PM & stakeholders to finalize the Scope, BA is also taking care of the product’s quality as the client's expectation. So: Without BA, build wrong things.Without PM, exceed budget, extend the schedule.And without a great collaboration between them can lead a project to all the things above. PM & BA overlap tasking Let's get back to the above picture, it’s easy to reveal that Project & Product is strongly dependent on each other. Imagine that, the client adds essential change requests to the product, and promptly it makes the project scope get bigger, the cost of building the product would be increased and it take longer to complete. It’s just a popular example, but in actual work, other things can happen in many many ways, and then potentially to lead the project to fail. To keep everything are under control, it’s necessary to have a tight collaboration between PM & BA, bellow are kind of works they have to share in daily activity: Scope & Requirements ManagementCommunications ManagementRisk ManagementStakeholder Management Go ahead with the following sections to understand deeply how to perform a good work and how to collaborate on those items. What & How to collaborate? Scope & Requirements Management As mentioned in the above section, requirement changes actually happen in every project, but without control procedure it would become Scope creep. Some change requests are essential, scope creep is a situation that generally considered harmful to the project. To welcome the good and needed, and also avoid scope creep, all the changes have to be recognized, judged and managed carefully. The process to control them: Identify changeUnderstand whether it provides business valueDiscuss the impact on quality, budget, scope and scheduleIs it feasible?Give options for stakeholders to choose Following those steps makes everything clear and every provided selection is reasonable, therefore the team and stakeholders can easily make a decision. Further, it helps to build trust in one another by removing all concerns and worries. Communications Management Communication is vital within projects. PM & BA communicate to share understanding about requirement and intent, the priority, timeline, and also keep track on what the team are working on. Since both PM & BA interact with the same stakeholders, many detailed conversations in different contexts, friction may arise. To avoid this, they have to make transparency on: What am I working on?What are my priorities today?Who do I plan to interact with?What are key messages that we need to collaborate on? So that they can ensure consistent messages are being communicated to the team and stakeholders.Beside communicating with each other, the equally critical part is to have this with team and stakeholders: Listening to stakeholders - What do they need? What do they want? How do they feel?Sharing understanding, knowledge, experience and also learning from themHaving a clear communication flow to engage appropriate stakeholders for each type of communication in the project. That allow to connect better, build trust and stronger relationships with one another. Thus, contribute to project success. Risk Management When starting the project, PM & BA might feel no risk, but during the implementation phase, risks are always ever-present. So what kind of risk do they have to pay attention to? Stakeholders involvementBuilding wrong thingsThe risk to schedule For example, if there is a complicated requirement, we need the client to involve in, but they can not because they're busy(the project is just a low priority task in their daily activities), then we make an assumption, if our assumption is not true, it’s a big risk that affects on the output and schedule as well. So PM & BA should have a process to manage all those kind of risk together and ensure the risks is well understood and under control: Identify the risk factorsMeasure the effect of each risk factorPropose and take appropriate actions to mitigate the high-risk factorsMonitor the low-risk factors and repeat the process when situations come Stakeholders Management Continue with the example above. It's sometimes hard to involve stakeholders due to the time and they might not understand how important they are in the project, so please let them know: Role, responsibility and expectationHow their work connects with the projectWho do they have/should to work with After clearing all the things above, PM & BA should keep the project team is coordinated by: Always scheduling for stakeholders' meetings - let them proactively in arranging their time.Making the meeting agenda - let them well prepare for the meeting.Combining meetings as much as possible - helps to save time, gives them a chance to interact and learn more from others. Through it, build better relationships and trust.Sharing key messages before and after the meeting - make things transparent and let others feel comfortable to contribute. Doing those would show stakeholders to see the value of their time and how it would be used. Working with the team helps them in other areas. PM & BA also ensure that the time is used well to maximize this. Conclusion The sign of the great collaboration between PM & BA is performing their work as the same person, understanding everything about the project and product. To do so, they have to clean up roles and responsibilities on each side, share their work and support each other. PM supports BA to know the terms of project management: time, cost, and scope. BA has to impart business needs, and client expectations to PM. The important thing is to spend enough time communicating to be able to respond to daily changes. For external, define the working flow, and communication flow. Tactically involve stakeholders & project members in daily activities. Unique them in one team and lead them on how to collaborate with one another to achieve the project and product goals. Reference https://www.pmi.org/learning/library/business-analyst-project-manager-collaboration-6512https://www.linkedin.com/learning/business-analyst-and-project-manager-collaboration

Chức Năng Record Trong KATALON

Bạn là một Coder và muốn tái hiện kịch bản một cách nhanh nhất có thể? Hay bạn là một Tester mà chưa biết gì về lập trình cũng như rất khó có thể tiếp cận với Automation Testing? Thì ngay lúc này đây mình muốn chia sẻ đến bạn một tính năng rất hay trong Katalon đó là “Record".Để không dài dòng tốn thời gian, mình sẽ đi thẳng vào hướng dẫn luôn nhé! Bước 1: Đầu tiên để có thể sử dụng được thì bạn hãy download và cài đặt theo link này nhé: https://www.katalon.com/download/ Bước 2: Xong, giờ bạn hãy mở Katalon lên và tùy chỉnh một vài thiết lập nho nhỏ nào. Vào Project>Settings Cửa sổ mới hiện ra, tiếp tục chọn: Execution. Tại đây ta sẽ tuỳ chỉnh cho “Default execution", trường này cho phép ta chọn Browser mặc định khi ta chạy Test Cases. Ở đây mình set là “Chrome" nhé. Bạn cũng có thể chọn Firefox, IE, Safari tuỳ vào mục đích của bạn. Chọn xong thì Apply thôi. Rồi đó, giờ bắt tay vào nha. Tạo Project Đầu tiên thì tất nhiên ta phải tạo Project mới rồi. Chọn vào File > New > Project. Khi đó sẽ xuất hiện cửa sổ "New Project" như bên dưới. Ta sẽ điền tên project vào trường Name, tiếp tục vì ở đây mình hướng dẫn cho Web nên sẽ chọn “Web". Tiếp đến chọn Location là nơi để chứa thư mục project này, có thể dùng mặc định có sẵn hoặc có thể tuỳ chỉnh chọn lại bằng cách click vào nút Browse… và chọn location bạn muốn. Khi đã hoàn tất xong, click vào nút OK để hoàn thành. Sau đó sẽ tiếp tục hiện ra cửa sổ như bên dưới, bạn có thể bỏ qua bằng cách đóng lại. Sau khi tạo thành công thì sẽ có những thư mục được tạo sẵn như ảnh dưới. Và ở bài viết lần này bạn chỉ cần quan tâm 2 thư mục mình đã khoanh đỏ là “Test Cases” và “Object Repository" nhé! Record Web Tại đây mình sẽ hướng dẫn bạn cách Record nhé! Đơn giản thôi, nó có nghĩa là Katalon sẽ ghi lại các thao tác mà bạn thực hiện trên web. Từ đó bạn sẽ lưu lại và tái sử dụng cho những lần sau. Đầu tiên để ghi thì tất nhiên bạn cần bấm vào biểu tượng “Record Web" như ảnh bên trên. Sau đó sẽ hiển thị cửa sổ “Web Recorder" như bên dưới. Những mục chính cần chú ý mình đã khoanh vùng đỏ ở ảnh trên: URL: là nơi bạn sẽ điền URL của web bạn sẽ truy cập.Browser: có thể click vào mũi tên bên cạnh để lựa chọn trình duyệt bạn sử dụng để chạy (Google Chrome, Firefox, IE, Safari, …)Vùng khoanh đỏ to rộng nhất thì đó chính là nơi sẽ ghi lại thao tác của bạn sau khi thực hiện trên web.Và cuối cùng sẽ là nút “Run all steps", ở đây sau khi đã ghi lại các thao tác bạn có thể chạy thử với phần record đã được ghi lại.Sau khi đã hài lòng với Test Case bạn mong muốn, hãy lưu lại TC này bằng cách click vào nút Save Script. Dưới đây là màn hình kết quả sau khi mình đã thử ghi lại một số hành động thực hiện trên chính trang web https://www.supremetech.vn/ Sau đó sẽ có cửa sổ “Add Element to Object Repository" hiển thị: Vùng khoanh đỏ bên trái sẽ hiển thị ra cho bạn những element mà Katalon đã bắt được khi bạn thao tác.Vùng khoanh đỏ bên phải là nơi cho phép bạn chọn nơi lưu trữ element. Có thể chọn thư mục có sẵn hoặc có thể thêm mới bằng các click vào nút “New Folder" mình khoanh đỏ ở bên dưới. Mình đã tự tạo mới folder có tên “test1” và nó đã được hiển thị ở vùng phía bên phải. Giờ mình sẽ lưu vào thư mục “test1” luôn nhé! Xong rồi thì hãy bấm OK thôi. Lại thêm 1 cửa sổ khác hiện ra, bạn sẽ điền vào tên của Test Case. Tuỳ bạn đặt thôi, sao cho dễ phân biệt giữa những Test case. Ở đây mình sẽ điền vào “Test Case 1” và bấm OK. Kiểm tra và Run lại phần đã Record Đã tạo xong Test Case rồi đấy! Tại thư mục Test Cases bây giờ đã có thêm “Test Case 1” là cái mình đã đặt tên cho bộ test case ở phần trên đấy!Còn ở Object Repository đã có các element liên quan được lưu vào thư mục “test1” do mình tự tạo.Còn phần khoanh đỏ bên phải chính là phần hiển thị khi mình mở bộ “Test Case1” lên đấy.Và ta có thể Run test case này bằng cách bấm nút mình chỉ mũi tên màu đỏ bạn nha (có thể click nút mũi tên bên cạnh để chạy bằng trình duyệt khác, hoặc là click vào luôn thì sẽ chạy trình duyệt mặc định bạn đã chọn ở phần Setting). Cảm ơn bạn đã theo dõi bài viết hôm nay của mình! Hi vọng bài viết này sẽ giúp bạn tiết kiệm được kha khá thời gian trong việc test.! *(Bạn có thể theo dõi thêm *video bên dưới* mình thao tác cho tạo Test Case bằng Record để hiểu hơn nhé!)*

Top 10 Design Tools For UX And UI (2025 GUIDE)

Selecting software for UX and UI design is never easy. You want to get something that enables you to flex the full extent of your creative muscle, but you also need a tool that will open your mind to new ideas and approaches you'd have missed. And then there's the issue of how well the tool coalesces with a team's administrative procedures, its integration capabilities, and the returns on investment for each pricing plan, among other factors. But don’t worry, we will list the top ten UX and UI design tools to consider using in 2025 and highlight their standout attributes. Sketch Sketch is impressive because, thanks to custom grids, it allows you to easily adapt your UI designs to different target device screens and their respective dimensions. It will also let you easily reuse various components to maintain consistency in your designs, which is very important for branding. Besides the presets and artboards, Sketch offers pixel-level accuracy with a snapping mode and smart guides, so your work has no blemishes. You’ll also benefit from its Boolean editable operations when introducing changes at different stages. Unfortunately, Sketch is only available on macOS, which complicates collaboration. Source: Sketch Adobe XD One standout feature of Adobe XD is the 3D Transforms, which allows you to represent different elements from specific perspectives (angles) and varying depths. This makes it ideal for designs intended for augmented and virtual reality systems. Additionally, Adobe XD offers expansive prototyping capabilities, enabling designers to publish and share interactive designs. With multiple animation options for the smallest components and voice prototyping, you can quickly realize a lively design. You'll have a prototype you can speak to, one that speaks back and makes every action feel like an event of its own but still part of a family. Thanks to Adobe XD's assortment of UI kits, this applies to Google Material Design, Apple Design, Amazon Alexa, and many others. Source: Toptal Figma Figma’s browser-based wireframing capabilities make it a go-to tool for designers who want to quickly create the skeleton for their designs and share them with colleagues. It also enhances collaboration by allowing users to place comments in their wireframes and receive real-time feedback. While Figma may seem like a tool best suited for presentations and brainstorming thanks to extensions like FigJam and its drag-and-drop approach, it allows you to convert wireframes into clickable prototypes to get a taste of the intended experience. Source: Digidop Balsamiq This tool offers a much leaner take on wireframing, going easy on the add-ons and keeping users focused on channeling their whiteboard or notepad workflow. However, it has numerous built-in components to drag and drop into your project's workspace with minimal learning time. Lastly, Balsamiq works on both PC and Mac. Source: Balsamiq >>> Related articles: Differences In UX Demands Of A Desktop And Mobile App For A SaaS ProductAtomic Design In Software Development Overflow Overflow helps you combine designs made in various tools, such as Adobe XD, Sketch, and Figma, to create coherent user flows when envisioning the journey through your app. You can also add device skins. You can use different shapes and colors to lay out a process's logic as you draw your user flow diagrams. Those viewing the diagram can easily follow it and see what happens when a particular condition is met and what the screen looks like. Overflow can also convert your prototype links into connectors in the diagram, so you don't have to redo that work. Source: Overflow FlowMapp FlowMapp offers a more stripped-down approach to creating user flow diagrams. This makes it perfect for designers still in the strategizing phase who don't have many complete screens to include in the diagram. While it may seem rudimentary, FlowMapp can help you make important discoveries. For instance, some screens may need to be split, with one accessed using a button on another, while others need to be condensed into one because the functionality is highly related. FlowMapp gives a more comprehensive view, so other stakeholders like copywriters and sales executives can contribute to the UX plan with a greater understanding of the opportunities and boundaries present in the journey. It’s great for choosing where to insert CTAs and additional messages, like warnings at checkout, to combat fraud or collect user feedback. Framer Framer’s code approach, origins, and compatibility with React suit designers focused on the latest web design technologies. Nonetheless, it offers more user-friendly UI design tools and usability testing features. More importantly, Framer has several plugins that designers can use to embed media players, grids, and other elements into designs to capture content from services like Twitter, Snapchat, Spotify, Soundcloud, and Vimeo. It also has a variety of template categories, ranging from landing pages to startups, splash pages, photography, agency pages, etc. Source: Goodgrad Proto.io Thousands of templates and digital assets and hundreds of UI components. That is one of the starting points Proto gives you to make your designs come alive within your web browser. Secondly, you can start your prototyping journey by importing files from Adobe XD, Figma, Photoshop, and Sketch. You'll also be able to explore different results for touch events, play with many screen transitions, and utilize gestures, sound, video, and dynamic icons. Proto.io comes with mobile, web, and offline modes. Source: Proto.io Axure Axure helps you make prototypes easier to follow by inserting conditional logic. This tool also encourages documenting as you work on high-fidelity prototypes rich in detail. Coupled with the ability to test functions and generate code for handoff to developers, Axure enables team members to comb through work swiftly with minimal oversight, having ready releases much faster. Source: Axure InVision InVision incorporates digital whiteboarding into the journey to a working prototype, which makes it great for projects where a team wants to keep ideation running concurrently with actual design work for as long as possible. It comes with a decent list of integration capabilities, ranging from project management tools like Jira and Trello to communication tools like Zoom and Slack. You can even hook up Spotify to provide a soundtrack for members doing freehand brainstorming. Source: Invisionapp Wrapping Up Every tool has pros and cons, so always consider what phase of the project a specific tool fits into, how well it brings everyone together, and how much creativity it supports. While we've focused on Atomic Design In Software Development top ten picks, many other tools could dominate top UI design trends in 2025, such as Marvel, Origami Studio, Webflow, and more. For professional help in selecting the right UX and UI design tools, contact us for a free consultation.

Differences In UX Demands Of A Desktop And Mobile App For A SaaS Product

While it was more common for individuals and institutions to buy software in the earlier days, the concept of software as a service isn’t that new either. And as smartphones get smarter and more accessible, many product companies are shifting their focus to this ballooning market to sustain and increase profit. But even though many have increased revenue by enhancing their mobile apps, some companies are excelling thanks to a good desktop app UX. Mobile apps often shine when it comes to daily life products for the individual end user while desktop apps encapsulate stunning collaboration and productivity solutions. A recent StatCounter study put desktop traffic at 56.51%, with mobile traffic at 50.48%. Many other reports show that there’s still a roughly 60-40 split in mobile and desktop traffic. Both market segments are here to stay, so let’s examine the differences between UX design for desktop and UX design for mobile: UI Details One of the significant differences is that desktop users are more comfortable having plenty of items fixed on a single UI screen/window. In contrast, mobile users have limited screen space and may use their thumbs more than any other finger, so you can hardly get away with a cluttered UI. Not only does it look overwhelming, but it also increases the chances of a user tapping the wrong button/option. Unfortunately, there are no straightforward solutions to this challenge. You're likely to tuck a feature/function two or more screens away, which users won't be so happy about. Luckily, some designs enable you to have retractable menus that slide into place and then slide away. You also have the option to create circular icon menus that appear when you hold down a button for a while. Ultimately, you should have a navigation option that makes it easy to go to the previous page or return to the general menu. Source: Freepik You’ll also need to include a button for the most important action a user can take at that stage in their journey. If it's the opening page, this could be a signup button; if it's a category page, it could be an "add to cart" button or a "buy" button if it's the checkout page. Whatever the CTA is, it should be visible. The user shouldn't have to first scroll down the page. It should also be within the thumb zone, so ensure it's wide enough. UX design for mobile should also consider the unique gestures like swiping, tilting and shaking that can make a mobile app more fun to use, not forgetting the use of haptic feedback to respond to a user’s command. >>> Explore more articles about UI and UX design: Top 10 Design Tools For UX And UI (2025 GUIDE)Top Emerging Trends In App UI Design (2025 OUTLOOK)Atomic Design In Software Development Performance Ideally, both desktop and mobile app versions should be as smooth and fast as possible. However, when you consider the context in which they operate and the behind-the-scenes work involved in making apps faster, you realize that you might need to put more emphasis on one of them. Mobile apps are more likely to be run on devices with limited RAM, storage space and processing power. Additionally, users are more likely to travel with mobile devices to remote areas where internet connectivity may be poorer. This is why it is essential to optimize mobile apps so they can still work fine when low on resources. From memory allocation to caching, reliance on CDNs and compression for lighter media file versions, offline modes, variable streaming bitrates and data template reuse, there are various techniques you can use to achieve higher mobile app performance. Additionally, don’t forget to test on as many devices and OS versions as possible. Personalization Many software users want to feel like the product was made just for them and it deeply understands them. In the past, personalization came in the form of changeable skins, fonts and colors. Later, it advanced to more important features like changing languages, currencies and measurement systems. However, personalization has to evolve even further. For instance, if the user has enabled your mobile app to access their location, can it suggest the perfect playlist when it detects that they are by the beach or at a riverside campsite or safari lodge. Can your shopping app switch to suggestions for sweaters and cold-weather clothes when the user is in a cold region? Will your food app point them to the places with the best hot beverages and confectioneries? Personalization covers several areas, including the way a person types and uses emojis, the order in which they browse pages, how they use search bars and more. Unlike desktop apps that run on devices like work computers that stay in the same place and are shared, or laptops that usually move between work and home, a mobile app often runs on a device that spends most of its time with one person, going everywhere. This is why making mobile app versions as adaptable to the user as possible is crucial. Security and Customer Support On the security front, mobility creates more headaches since it increases the chances of a user losing a device or connecting to an unsecured public network, among other scenarios. This means you should augment mobile apps with more security options, such as fingerprint locks, face ID and other approaches that a mobile device's native hardware can allow. On a deeper level, developers can look into code obfuscation, "root," and "jailbreak detection " to further protect against attack techniques that take advantage of the mobile app-specific architectural and operational characteristics. When it comes to customer support, mobile app UX designers can look into things like the ability to screenshot an error message page and quickly submit it via live chat or tap a call button to speak to an agent. Another vital customer support area is self-help. Remember, desktop app versions have the advantage since there's more space to display a help article column alongside the actual screen/dashboard where the user is working. They can also properly display video demos and offer an Info view where you see what a button or other element does by hovering the cursor over it. That said, mobile app UX designers need to find ways to condense knowledge bases and other self-help materials within the app to simplify the journey from learning to applying. They can also use GIFs to strike a middle-ground between heavy videos and static images when delivering demos. Wrapping Up Overall, it's prudent not to consider the desktop outdated. Instead, focus more on what it easily accommodates, then figure out how to emulate that on mobile devices. As always, it helps to work with a team of professionals conversant with the nuances of developing and delivering desktop and mobile SaaS apps. You can start this journey by contacting the SupremeTech team for a free consultation on how we bring software ideas to life for our clients.

How Agile Development Influences Developer And QA Tool Choices

On the surface, it might seem like the Agile methodology is simply about reimagining waterfall development by keeping an open mind. However, this approach has far-reaching implications for people, tools and processes. That said, let’s dissect the major Agile development characteristics that affect developer and quality assurance (QA) tool choices and talk about some great examples of Agile development tools: Increased Collaboration Agile development pushes for greater synergy amongst teams. It's hard to release higher-quality products faster if many of the people involved aren't openly communicating with each other about challenges. For example, a developer working alone can easily store, manage and reuse code using one machine. However, things get trickier once a project needs more hands and numerous software units are being created. You'll need a space where everyone's work can be converged, with changes indicated coherently. Photo by Tim van der Kuip on Unsplash  This is where tools like GitHub come in. GitHub will enable developers to combine their code into modules and easily perform version control. More importantly, developers can do all this remotely since it's cloud-based. It’s also worth noting that GitHub isn’t the only code hosting/management solution out there. You can always try others like TaraVault, AWS CodeCommit, Bitbucket, SourceForge, and many more. By the way, collaboration doesn’t begin only when the team has been formed. It’s an ethos that can be applied even when building the team and responding to talent departure or unavailability. With tools like Crowdsource.io, you can set up a project folder, post your needs and respond to interested developers. This social approach simplifies recruitment, especially during emergencies. Continuous Testing In continuous testing, teams don’t have to wait for all units to be ready before they start. Instead, they endeavor to test whatever small piece is ready as others are prepared. By doing so, they are less likely to be blindsided by complex problems in the software that delay a release as the team tries to fix them. This approach often means the testing workload will fluctuate as the project progresses, so quality assurance teams will have to be swifter at scaling testing capacity accordingly. One of the best ways to achieve this is by using test automation tools. Photo by freestocks on Unsplash More specifically, you'll need user-friendly test automation tools if teams are to quickly add new automations in response to changes in the testing workload. They should also facilitate reusability and easily plug into your CI/CD pipelines, which is what tools like Leapwork are good at. Additionally, an Agile testing team needs robust tracking and reporting capabilities to excel at continuous testing. This is where tools like JIRA and nTask Issue Tracker shine. They’ll offer features tailored to defect tracking while also helping you analyze QA team performance in real time so you can know how to increase efficiency and remain on schedule. Value-Driven Development You can only offer so much value if you aren't listening and responding to users. So to get better at value-driven development, you must create a smoother path for user feedback to be absorbed into the development lifecycle promptly. Photo by krakenimages on Unsplash One critical piece in this area is the usability testing tools you rely on. They should have functionality that speaks to agility, such as; Recruiting participants remotelyA/B testingIntegration with various tools like prototyping solutions, design tools, productivity tools and more. These are some of the crucial functions needed because: You want to be able to start user feedback collection from anywhere as soon as you get the green light. In that sense, participant recruitment should involve as little bureaucracy as possible and be easier to manage as you conduct more tests down the road. Testers should be able to compare feature variations side-by-side instead of testing one, then trying another later. So through A/B testing, you shorten the time it takes to discover whether a slight tweak in a feature caused a significant improvement in usability. Once you have user opinions and usability metrics, there shouldn't be that many error-prone processes to link the data to the concerned parties and the different tools they use to respond to the feedback. Whoever is going to modify a product should be able to quickly see how their previous contribution fared. The other leaders who have to sign off on additional changes should also be able to view this information simultaneously, so there isn't much sitting and waiting. Tools like UserZoom, Loop11, UsabilityHub, Userlytics and Maze will go a long way in helping you increase the customer value realized with each iteration. The glue that holds everything together While we’ve talked about the Agile QA process and Agile development software, another key aspect is more about the administrative side of an Agile project. When it comes to this area, you'll hear a lot of buzzwords and office terminology thrown around, like modularity, effective communication and visibility. But to be clearer about the tenets of organizational agility, here’s what Agile teams should emphasize during the development life cycle: Teams should be able to zoom in on the smallest of processes as this is how they'll know what's essential and what isn't and also what could be improved. Organizations should give more autonomy to the lower ranks so they can do some things at their discretion. If every small move has to first be run up a long chain of command, all in the name of maintaining control and minimizing risk, you can forget about faster releases. Whatever you practice should be incremental. For example, when figuring out how to communicate better, you don't just set benchmarks and lean back. Instead, you should revisit them to see if they are working and decide whether to maintain, increase, decrease or move sideways. So how exactly do these principles shape tool choices? Well, you’ll need Agile project management tools that offer features like automated notifications, workflow customization, analytics and recommendations. There are plenty of options to try; Agilean, ProofHub, ActiveCollab, MeisterTask, Axosoft, JIRA and DailyScrum. Wrapping Up Ultimately, tools that work for some may not work for you, so it starts with understanding your existing organizational culture and how much you're willing to alter it in pursuit of agility. That’s when you’ll know where tools are applicable and which functionality they must have. To learn more about how to pick the right developer and QA tools for Agile development, contact us for a free consultation.

What To Consider When Choosing Languages For Developing SaaS Products

Over time, several programming languages have emerged as reliable tools that developers can use to bring software ideas to life. However, software end-users simply want a product that excels at solving the problem at hand. They don’t care that much about the ingredients and recipe behind it. Nevertheless, it’s extremely crucial to choose the right programming language when developing SaaS products. Making the wrong choice can lengthen the development lifecycle, produce a sub-par app and cost you even more money post-release as you try to fix several issues. With that in mind, let’s discuss the major factors to consider when choosing a programming language for developing a SaaS product: User-friendliness Even though software creation is mainly done by those with above-average tech-savviness, technology is supposed to make things easier for everyone. So if a programming language requires convoluted syntax spanning several lines just to create a basic instruction, the code will get clunky quickly. This makes it hard to follow, especially for newcomers who join the team while the project is already underway. And don’t forget that it will also be harder to document. Honestly, many languages can do much of what Python does, but Python remains a favorite for many developers due to its user-friendliness. This language tries to make coding resemble writing actual English commands as much as possible. User-friendliness also extends to functionality like code templates and the extent to which a language simplifies code reuse. Ecosystem The first part of the ecosystem to consider is supporting tools. Consider the variety of libraries you can hook up to the language you're using. Besides the libraries, there are documentation tools, automation tools, testing and quality assurance tools, and office/team productivity tools. The more tools a language can work with, the easier it is to take a piece of your work and run it through as many processes in your workflow, bringing it to readiness in the shortest time possible. In addition, strong integration capabilities also simplify intra-team and inter-team collaboration. For example, error detection, logging and subsequent communication happen more fluidly. The second part of the ecosystem to evaluate is the community. Find out how large and active the forums related to certain programming languages are. Communities encourage knowledge sharing, which helps you solve problems faster and at a lower cost while also opening your mind to new ingenious approaches that you can apply beyond an immediate challenge. Photo by Christopher Gower on Unsplash This is where open-source languages like JavaScript and Python beat the competition. According to Statista, JavaScript's community size reached 13.8 million developers by the end of 2021, while Python came in second with 10.1 million developers. Delivery Platform and Software Elements You need to ask yourself two critical questions when choosing a programming language for developing a SaaS product. One is, "On what platform/OS will the final product run?" For example, are you developing a product for Windows only, or do you want to cater to the Mac crowd too? The same goes for mobile, "Are you building for Android, iOS or both?" This question is particularly crucial because even though many frameworks can be used to develop cross-platform apps, such as React Native, Flutter or Xamarin, others stand out when developing apps for a specific platform. For instance, many developers find Swift to be one of the best options for developing iOS apps, and also like Kotlin for Android app development. Unfortunately, there’ll always be trade-offs regardless of the approach you take. If you go with a more universal cross-platform language, you’ll probably save money and release faster, but the product may not fully maximize one OS’s capabilities, especially when it comes to OS-specific APIs or performance-intensive processes. Furthermore, you may also have to spend some extra time fiddling with interpreters and libraries. But if you go the native route with an option highly geared toward a specific platform, you'll likely produce something that excels on that platform. Sadly, you may incur higher development costs and work slower. Secondly, it also helps to consider which aspects you'll focus on for your minimum viable product and other early iterations. For example, if your UX goals require a concerted effort on back-end development with a super lean front-end, you can start out with a language that is superb for back-end work and adequate for your simpler front-end goals. As you enhance the front end further down the road, you can spend more time exploring the valuable capabilities that differentiate Elm, TypeScript, CSS, HTML and other tools. Human Resources This factor may seem like one you have to deal with after you make a choice, but it's worth keeping an eye on from the get-go. For starters, some languages are newer and have fewer developers with high proficiency levels, which often means higher pay demands. Photo by Annie Spratt on Unsplash But then again, because some languages are more widely used, even the developers with preliminary knowledge have jobs most of the time. Consequently, the salary ranges for developers using languages like Python and Java remain pretty high. The trickier bit comes in when you intend to use multiple languages but you want to moderate the developer expenditure. Finding developers who are sufficiently skilled in the specific combination of languages you want to use might be harder. And if you do, you'll probably need them more than they need you, and they'll know it, so they won't hesitate to charge you highly. Wrapping Up Ultimately, the question of how to choose the right programming language remains a complex one. Technology constantly evolves, and many tools roll out new amazing functionality faster than you can blink. Moreover, some entirely new tools come onto the scene every now and then. So whatever you do, ensure that you have clear goals regarding the quality of the SaaS product you want to deliver and avoid shortcuts since they’ll probably cost you more later. Luckily, a professional team like SupremeTech can relieve you of the burden of which programming language to choose. You can contact us for a free consultation on the scope of software development solutions we provide.

How To Exercise Value-Driven App Development That Drives Revenue

Many software development teams spend long periods developing and rolling out features they've invested in, only to get lackluster results in customer satisfaction and overall revenue. On the other hand, some teams roll out a seemingly silly feature that eventually gets everyone giggling when using their app and drives more engagement. So how do some teams get it right while others fail? Let’s lay out some key value-driven app development strategies that can help you boost revenue: Involve industry experts When development teams are creating software for a client, they often talk to one person on the client’s side or a few people in higher managerial positions. Instead, they should be speaking to people at various levels of the organization to determine how one department's actions affect another department's work. Additionally, if the product isn't just for internal use by one client but for a whole industry, it's essential to talk to different people within that industry. This helps you learn what they are getting wrong individually and as a group. You can discover which approaches are unique to one organization and which workflow practices are industry-standard. From here, you’ll know the must-have features that appeal to a larger group, then create a list of optional features that highlight the ingenious ways a few entities in that industry are tackling inefficiencies. Consequently, you can test these extras individually to see if they'll be relevant for the whole industry or if they only worked for one organization due to their unique characteristics. Remember, HR in an ecommerce company won't be exactly the same as HR in a hospital, so if you know the product is aimed at a specific industry, find out that industry's major pain points before you start development. But what if the app is for the general public? So let’s say you’re trying to make the next WhatsApp or TikTok. In that case, it helps to speak to experts in fields like messaging and communication, behavioral psychology and other broad studies. You should also identify people who have previously worked at firms that do what you’re trying to improve. For example, a former PayPal worker could help you learn what’s missing in modern fintech products, depending on their role at the company. Define value at each stage It’s possible to make an app better in a particular area, like how fast it displays search results, but still not offer value. To create value and drive app revenue, you need to ask yourself, “What are users willing to pay for?” For example, many people are willing to pay for an app that helps them quickly get food from their favorite restaurants. So after ascertaining what people are paying for, find out what's missing in that product/service. What could be better than selecting the dish you want and receiving it quickly? The answer to this question starts with breaking down that entire process into various stages. These may include; finding a good dish, making changes to an order (increasing quantity, choosing different toppings, zinger or regular, extra cheese), notifying the provider that you aren't at your usual address, using alternative payment methods at checkout etc. By dividing the process into such stages, it's easier to determine what can go wrong in a particular phase or what can be added. Ultimately, something valuable changes the user's behavior in one way or another. For example, a favorites menu makes users spend less time scrolling through entire catalogs. They'll only do this when they are tired of their favorites. So in that sense, a better-looking strip of thumbnails might make a user feel good, but the ability to see which item is unavailable or which currently has a discount is more valuable. The ability to quickly see what's new, exclude items below or above a specific price, and other capabilities like that speak to someone who desires to pay. Therefore, whenever your team decides to improve an app, you should represent goals as something that induces an action that could culminate in a sale. For example, goals should sound like, "Make it possible to search by price," "Add option to change the delivery address for each order,” and "Add suggestions that would go well with the item ordered right before checkout.” Shorten the feedback loop It’s common for organizations to champion customer-centric product development, but listening to the user is only half the battle. To grow app revenue, you must transcend discovering what the people want and providing it. You should understand what they are saying and act on it faster than the competition. To achieve this, you ought to categorize feedback based on different criteria, such as; How detailed is it? Is it a score or an entire paragraph?Is it a request for a new feature, a review of the whole app or a small comment on how responsive and helpful an existing feature is?How much does it cost to collect that feedback (the tech tools you need, the amount of time you spend collecting data, the number of people involved in the process and more)? Teams often need to pay more attention to how organized they need to be to collect user opinions or observe and analyze user behavior. They need to remember that it can be tricky to put together a representative focus group, find a usability testing tool that tracks indicators in the desired manner, communicate feedback across the team and arrange meetings to brainstorm in response. By categorizing feedback, it's easier to visualize the entire journey of a user's opinion, the time it's received, and the different people that weigh in on how to respond to it up until it manifests in the next version of the product. Subsequently, you spend less time collecting irrelevant data or sitting on important information. Wrapping Up Value is subjective. This is what makes value-driven app development quite challenging. At the end of the day, there'll always be some hit-and-miss scenarios, but if you want professional help practicing value-driven app development that drives revenue, contact us for a free consultation.

Top Emerging Trends In App UI Design (2025 OUTLOOK)

While an app is made with a specific group of people in mind, that is, people who have a problem that the app solves, its user interface has to consider the existence of several sub-groups within that group. UI designers have to ask themselves a wide range of questions, such as: “Does everyone understand what a certain symbol means?” “Could there be an end-user who is blind?” “Will everyone be able to see this button or read this language?” On top of that, they also have to consider business interests like branding and cost efficiency. So, how are they getting better at harmonizing all this? To answer that, let’s discuss the emerging trends in app UI design through the SupremeTech article. Augmented Reality (AR) AR is gradually becoming a more common aspect of various app UIs, particularly because of its wide range of possibilities when using real graphics to communicate. This technology shows that you can communicate quickly and induce different responses by superimposing extra graphics onto an image or video of an actual entity captured. For example, you can create something that’s funny because it's not real, like showing yourself with dog ears or a flower crown. On the contrary, you can also create something that's captivating because it's almost real, like a view of your living room with a couch or your face with makeup. AR gives you a chance to visualize elements you'd otherwise have to put together physically and does so with unprecedented accuracy such that the imaginary representation is as close to the real thing as possible. Some examples of excellent AR usage include Modiface, See My Fit/Virtual Catwalk, IKEA Studio, Amazon Salon, Snapchat, Gucci Sneaker Garage, View in Room and Asian Paints. Voice UI Technically, Voice UI isn't entirely new. For a while, many software tools could respond to commands with something like an error message or instruction in audio form. However, what's changed recently is that thanks to artificial intelligence, users can converse with the software on a device. This is already in use with Google Assistant, Siri and Alexa, but there’s still room to expand. For example, designers can create interfaces that automatically pick up ambient noise in a room and use it as a guideline for adjusting music volume or as a trigger for something else, like a display of birthday party graphics and lighting when a crowd yells “Surprise.” Virtual Reality (VR) VR takes the concept of visualization one step further by immersing you into the space you’re viewing rather than simply pasting it onto a screen. It enables you to perceive dimensional changes when you move within a space, like an object getting closer or farther away. It's one thing seeing an object at the end of a room on a screen while being told the length and width of the room. However, it’s totally different when you’re actually in the room. You’re no longer trying to extrapolate from a smaller image on a screen that is also a certain distance away from your eyes. VR's capabilities are handy when trying to remotely touring a house. Moreover, it is about more than just viewing objects. VR can be used to relay commands that involve body movements, which makes it ideal for use cases like rehearsing a surgical procedure or assembling and repairing an intricate machine. Some good VR apps include Provata VR, Space Explorers, Tilt Brush, and Gravity Sketch. VR is also common in the gaming world. >>> Maybe you are interested: Top 10 Design Tools For UX And UI (2025 GUIDE)Differences In UX Demands Of A Desktop And Mobile App For A SaaS ProductAtomic Design In Software Development Haptic Feedback Haptic Feedback is designed to address a user through their sense of touch. In that sense, haptic feedback messages are usually conveyed as vibrations within the device a user handles. Initially, this technology was used in a basic manner, like notifying someone that they are being called if their phone is in silent mode or that they've chosen the right or wrong option on a screen. Later, it advanced into an exciting way to keep a user engaged by trying to simulate what it’s like to be in a particular situation, like the rattle in a car when it leaves a smooth tarmac track and goes off-road onto a rough and bumpy Murram strip. This use case has been prevalent in gaming controllers. Nevertheless, haptic feedback continues to evolve, with companies like NewHaptic using this technology to create fluid Braille touch screens that use tactile pixels (taxes). Clearly, haptic feedback could be a great tool for making apps more accessible to people with disabilities. Additional trends Many other UI trends are impressive, even though they may not have the most significant impact on user behavior. These include a dark mode, flat UI, glass morphism, metamorphism, animated illustrations, buttonless design and minimalism, asymmetrical layouts, and more. Ultimately, UI is an intersection of expression and technology, which means many designers will come across the same concepts, but the difference will be in execution. On that note, here are a few questions to answer before you jump onto a UI trend: Does it make life any easier for the user, or is it merely a fancy nice-to-have?What does it say about your brand? (futuristic, sleek, nostalgic, sexy, young and vibrant, sophisticated etc.)How much computing resources does it require? (Will it end up slowing down the app and making it heavier, or will everything still run smoothly)Is it inclusive, or does it speak to the strengths of a few while sidelining many who have a specific weakness?How much money will it cost to install and maintain? Lastly, remember that UI design goes hand-in-hand with many other elements of a software product. For instance, an e-commerce app's item display may require a slider to see different angles of a product, while a fitness app may only need a thumbnail for each workout. There are other considerations, like whether the subtle tones of neomorphic buttons would work well for a CTA, which usually needs to stand out. Wrapping Up UI design is a far-reaching aspect of app development that often requires various team members’ input. This can be tricky to execute while responding to changes in user demands and other project challenges during the development lifecycle. If you need professional guidance on addressing every facet of app UI design, contact us for a free consultation.

TypeScript – How To Avoid “Any”?

The harmful effects of anyAvoiding any How to avoid any? In the previous blog -