Explore all articles in Others

What makes mobile apps slow (and how to speed them up)

It’s no secret that people are always on their phones. If they are not on a social networking app, they’re shopping, gaming, you name it. On average, mobile phone users check their devices 63 times every day. In addition, Americans use their cell phones for 5.4 hours every day on average. This is excellent news for anyone developing an app or considering doing so. However, your app development endeavors will be met with lots of competition. If you want to increase the chances of your app standing out and gaining popularity, you have to ensure that it is fast. Human beings are not inherently patient. With the advancement in technology, they expect maximum speed from all the apps on their phone. According to Apteligent, a mobile app performance specialist, 48% of users will remove or abandon an app if they have to wait longer than two seconds for it to launch. Keep reading this article if your app is slow and you need answers. We will discuss the different issues that make mobile apps slow and how you can speed them up for user satisfaction. 1.    Running outdated software versions App performance will gradually deteriorate if your application uses outdated frameworks and software or has not been upgraded to newer versions in a while. This is because older software versions cannot use more unique features, including improved compiler optimizations and higher community engagement and support. When newer iPhones are released, you'll notice more users complaining about their phones significantly slowing down. Solution Take a closer look at your technology stack and identify any software that still needs to be upgraded to the most recent version. As a rule, the latest versions feature greater compatibility and improved functionality. They provide far better performance and offer more stability. In addition, they are typically embedded with various enhancements that can immediately increase the speed and efficiency of your app, from improved tuning tweaks to security alerts and bug fixes. 2.    Connectivity issues As a developer, you can do little about connectivity issues. It is up to the app user to switch to a better cellular network provider or find a more robust and stable Wi-Fi connection. However, you can make some internal changes to your app to allow it to run more efficiently even when connected to a poor network. There are two possible solutions: Solution: Using a Content Delivery Network Whether you are using a web application or a mobile app, a content delivery network (CDN) can significantly enhance your app's performance. A CDN utilizes multiple servers located all over the world to distribute content quickly and efficiently to visitors. This strategy is highly effective because users receive content from the server that is physically nearest to them. Load data as requested A mobile app often handles enormous amounts of data daily. As a result, loading a large amount of data simultaneously will slow down the app because it is trying to process many requests simultaneously. It would be best to load the data as needed to remedy this. On the other hand, you can opt to divide it into smaller chunks. You'll need separate assemblies to achieve this. Alternatively, you can load textual data first and image-based content later. 3.    Too much data It goes without saying that if your app is overloaded with data, it will take longer to load. However, this does not mean you can delete the chunks of data and make your program lighter. For one, you might have to sacrifice valuable features that make your app unique. Solution: Data compression Compressing data helps speed up loading without sacrificing the attractiveness or functionality of audio components, vivid images, and video content. Compression is a powerful tool that can dramatically accelerate your app's speed.  Data compression takes two forms:  Lossless compression: As the name suggests, content like text and spreadsheets are compressed without losing data. This method allows you to restore a file to its original size without losing data. Lossy compression: Although chunks of data are lost in this method, app users are unaware of it. It is excellent for compressing images, audio, and video. Note: For better performance, you can cache some photos and compress them so you don't have to load them repeatedly whenever a user requests them. 4.    Server issues One of the most frequent causes of delayed apps is typically a server issue. When a user acts as the app, the server performs multiple functions. For example, it executes application code, communicates with thousands of other users, retrieves data from its memory, and rotates between a variety of tasks. Because of the multitude of actions, your server is overwhelmed. As a result, it could run out of memory or process requests slowly to prevent it from shutting down. As a result, it delays processing a few requests while others wait to be processed. As complex as this sounds, several viable solutions can fix slow servers. Solution: Integrating a reserve proxy server Taking some of the strain off your server could help it function quickly and accommodate more requests. In addition, you can outsource some server functions by incorporating a reverse proxy server. A reverse proxy server sits before the device and manages internal flow/traffic. It can do this easily because it is directly connected to the internet, giving it the power to interact with the server via a significantly quicker internal system. As a result, the application server can perform other actions, load pages and send them to the reverse proxy server. The reverse server, in turn, waits for the user's instructions and passes on the ready pages. A reverse proxy server enables your app to operate at benchmark speeds while maintaining optimum performance. Use a load balancer In some apps, multiple minor servers are used instead of a single large one. In this case, it is advised to incorporate a load balancer. A load balancer is a software tool that evenly distributes the load across the servers to maintain a low response time. In addition, a load balancer supports SSL termination and static file caching. If you are still determining which load balancer would be best for your app, specialists recommend sticking with the option available on your cloud platform. Wrapping up Maximizing your app's performance is in your best interest. For one, there are established quality standards you must meet. In addition, speed directly impacts user experience and whether they will stick with or dump your app. If you still need to figure out what's slowing down your app, you can contact a mobile app development business and ask for a performance audit to double-check whether everything is in order. We at Supreme Tech are available for a free consultation. We are an outsourcing IT company focusing on mobile and web apps for English-speaking clients. We build and maintain the products using the agile methodology based on the client's demands.

How to maximize virtual recruitment and training for app development

Virtual work is a concept that has been introduced previously in the professional world, especially in the tech industry. Most companies are embracing remote and hybrid work to expand their employment pool and maximize efficiency and output. This was confirmed in a study by Cielo in 2020 - The Future of Work Survey. The study showed that 64% of recruiters are now more open to virtual work. The popularity of remote work skyrocketed with the onset of the Covid-19 pandemic that took the world by storm, causing worldwide lockdowns and closure of non-essential businesses. To save their companies, CEOs adopted remote work. Although the pandemic is under control and it's full steam ahead for all companies, many have retained remote or virtual employment. However, remote, and physical work require different strategies to maximize their potential. Therefore, relying on the exact procedures for hiring, onboarding, and training workers would be detrimental. Without face-to-face interaction with your employees, assessing their potential, hard and soft skills, professionalism, and whether they would be a good fit for your organization is challenging. The good news is that there are multiple ways you can replicate the physical experience of interviewing, hiring, onboarding, and training employees without wasting resources and time. This article will discuss ways to maximize virtual recruitment and training for app development. 1.    Plan virtual recruitment events Source: Unsplash Recruitment events are an excellent opportunity to expand the talent pool, boost brand awareness, and establish connections with potential candidates. Job fairs are relatively easy to set up depending on the platform you choose and other third-party software services you include. Indeed and Brazen are two of the most popular platforms you can use to organize job fairs. You can create an account, sign up, and create your virtual event in minutes. After creating your event, you can link to other apps like Zoom to allow for video conferencing. Although, some apps come with video conferencing tools embedded in them. A day before the event, you can open the 'lobby' and let other interviewers in and prepare for the fair by customizing greetings and questions. Brazen is a crowd favorite because of its ‘booth’ feature that allows companies to share information about their culture and environment that is readily available to anyone who registers for the fair. This information includes pictures, videos, short text, and links to other relevant pages. Once applicants register for a fair, a landing page automatically collects their resumes, cover letters, and additional information. At the end of job fairs, recruiters can take the next steps with candidates who stood out, such as direct messaging, emailing them or forwarding their information to concerned parties for further assessment. 2.    Request video applications Source: Unsplash You can opt for video interviews if you want to get a real feel of a face-to-face interview without the awkward silences, tension and wait times. In addition, video interviews are a creative way to get an insight into the behavior of your potential employees. For video interviews, you can send out questions they can answer in a self-recorded interview that they have to submit before a specific time. For instance, you can ask them to answer hypothetical questions directly related to the role they are applying for, their strengths, weaknesses, experience, qualifications, and achievements they are most proud of. Video interviews can help you infer whether an applicant is confident, honest, ambitious, and skilled and whether they would fit your company well. 3.    Grow your employer's brand Employers want to hire the crème de la crème in each field to build top-notch apps. However, this is easier said than done. If you want to hire the best talent, you have to ensure that they know about your company's existence. If you are just starting out, this can be pretty challenging, especially when you want to recruit remotely. One way to fix this is by increasing brand awareness. Developers need to know about your company, and they should want to work with you. You can start by working on your online presence—open social media accounts on all appropriate platforms like LinkedIn, Indeed, Twitter, Facebook, etc. In addition, populate your website with information about your company, such as the culture, vision, mission, portfolio, and events. Add real pictures of employees at the workplace if you have a physical office, and even create virtual tours so applicants can get a sneak peek into your work environment. Note: You can outsource your PR work to professionals if you want a highly effective brand presence. Lastly, monitor reviews about your company on platforms like Glassdoor. You can learn much from an objective perspective on your company. 4.    Make use of ATS Source: Unsplash Application tracking software is a lifesaver for HR teams. Screening, interviewing, and hiring candidates can be an overwhelming experience, especially for jobs that can be done remotely, like app development. You will have more than the average number of applications if you open the role to any qualified applicant worldwide. Application tracking software will help you cut the hiring process by days. ATS takes care of receiving resumes, cover letters, and contact information and storing it. ATS also handles screening candidates and rooting out unqualified candidates to reduce the load recruiters have to deal with personally. In addition, it lets candidates see their application status and handles the scheduling of interviewers. 5.    Keep lines of communication open at all times Source: Unsplash Although virtual hiring may be commonplace for your company, some applicants may be new to the entire process. It can feel like an isolating and scary process because they don’t have candidates the comfort and camaraderie of other candidates, they would have met at the interview venue. To get the most out of your remote hiring and onboarding process, you should ensure that your potential employees are as comfortable as possible. You can achieve this by keeping lines of communication open and responsive at all times. Below, I will share a few tips to make the process easier for candidates. Create a comprehensive document that will be shared with all applicants To avoid confusion and chaos in hiring, you can create a simple document that answers most of the questions candidates may have. For instance, the video interview date, the hiring process, its stages, who will be conducting the interviews, how long the interviews will be, and what sample questions they can expect. Candidates are always unsure about video interviews because each company conducts their interviews differently. In the PDF, let them know whether it will be a video interview or an audio one. If they must have their video on, state the dress code and whether they should join early and stay in the waiting room. You can also let them know if they need a pen and notepad ready to take notes. By clearly outlining all this, you are guaranteed confident and prepared candidates. Hold AMA sessions Source: Unsplash As we mentioned earlier, virtual interviews mean applicants don't have the luxury of meeting other candidates and sharing extra information about the job or company. To remedy this, you can hold 'Ask Me Anything' sessions to let them ask any questions they may have about the organization and role they are applying for. In addition, you can acquaint them with the hiring process, how long it will take and how they will know if they've made it to the next level. AMA sessions are a great idea because they let candidates get familiar with the company and allow you to feel the candidates out. You will be able to see the candidates who are chatty, confident, enthusiastic, and confident by the frequency with which they ask questions and voice their concerns and issues. Every employer wants a social candidate who isn't afraid to stand out. AMA sessions are an opportunity to express that. Bonus: You can record these sessions and save them for future purposes. Instead of holding them whenever you hire, you can share them with potential employees and save time. 6.    Take shortlisted candidates for a trial run Source: Unsplash If you want to be sure of your potential candidate's hard skills before you commit to a full-time role, you can make the final stage of the interview process a simple paid job that they have to complete in a given amount of time. Alternatively, it can be a simple live test during their interview to ensure they don't have outside help. Finally, successful candidates can be hired and offered the role in a formal email. 7.    Send out welcome packages Source: Unsplash Who said virtual hiring has to be impersonal and cold? You can take the seriousness out of hiring by sending a surprise welcome SWAG bag to the hired candidate. It can include a brochure, branded products, a company laptop, you name it. If your pockets are deep, you can throw in a fun extra gift like a box of chocolates or a Starbucks gift card. Wrapping up If you borrow most of these tips, hiring and training remote workers can be the most seamless and rewarding experience. Are you developing an app and need a hands-on remote team? Check out SupremeTech. We are an outsourcing IT company focusing on mobile and web apps for English-speaking clients. We build the products using the agile methodology based on the client's demands and maintain them.

Crawl Website Đơn Giản Với Postman

Mở đầu Trong kiểm thử API, chúng ta không xa lạ gì với Postman, một tool kiểm thử API rất phổ biến và được sử dụng trong nhiều trường hợp khác nhau. Nếu như bạn chưa rõ API là gì, có thể tham khảo lại bài viết giới thiệu về API cơ bản của mình tại ĐÂY. Trong bài viết này, mình sẽ hướng dẫn các bạn cách crawl đơn giản một website bằng Postman nhằm kiểm tra xem các link hay hình ảnh có trong website đó có bị die hay lỗi gì không?  Crawl Website là việc lấy thông tin từ website , trích xuất ra những thông tin người sử dụng cần, đồng thời cũng tìm những link có trong trang web đó và tự động truy cập vào những link đó. Quá trình đó sẽ lặp đi lặp lại đến khi thu thập đủ thông tin người dùng cần.  Ví dụ dự án của bạn có một website như Landing Page hoặc trang chủ chẳng hạn, và trong trang lại có các hình ảnh, các hyperlink dẫn tới các trang con hoặc các website khác. Sau một thời gian bạn cần kiểm tra lại xem những hyperlink đó có còn hoạt động hay không. Thay vì phải click thủ công từng link một thì Postman có thể giúp bạn đơn giản hoá và tiết kiệm thời gian hơn cho việc này rất nhiều. Trước khi đi sâu vào bài viết, bạn cần có một số kiến thức về các khái niệm dưới đây: Script trong PostmanRunner trong PostmanCó một ít kiến thức cơ bản về Javascript Khâu chuẩn bị Để bắt đầu, máy tính của bạn cần cài đặt Postman, tất nhiên rồi. Sau đó chúng ta sẽ tạo một Collection chứa hai Request với tên bất kỳ và hai biến collection. Trong ví dụ dưới đây, mình sẽ tạo Collection tên Crawl Website cùng 2 request: Input check: Request này dùng để kiểm tra đầu vào trước khi crawl.URL check: Request chính dùng để crawl website.2 biến collection gồm có: rootUrl: URL gốc của trang cần checkstartUrl: URL bắt đầu khi chạy test, ở đây mình sẽ để rootUrl và startUrl chung 1 URL Input check Giờ chúng ta cùng thiết lập cho request đầu tiên. Ở request này, mình sẽ code tại phần Pre-request nhằm kiểm tra các đầu vào trong quá trình crawl website. Dưới đây là danh sách các function mình cần tạo trong request này Kiểm tra danh sách biến có trong collectionKiểm tra giá trị URL gán vào biến có định dạng hợp lệTạo biến Global để sử dụng cho request tiếp theo Như mình đã nói ở phần mở đầu, các bạn cần có kiến thức cơ bản về javascript để có thể hiểu hơn và tuỳ biến lại code phù hợp với nhu cầu của dự án. Mình sẽ có gắng giải thích đơn giản để những bạn ít biết về code vẫn có thể sử dụng được. Ở request này, URL của request chúng ta sẽ để biến {{startUrl}} với phương thức là GET. Kiểm tra danh sách biến có trong collection Trước khi kiểm tra được danh sách các biến có trong collection, ta sẽ chuyển các biến đó thành object và gán vào biến postmanVariables <strong>const</strong> postmanVariables = pm.collectionVariables.toObject(); Sau đó ta kiểm tra các biến cần sử dụng đã có trong collection hay chưa pm.expect(postmanVariables).to.have.all.keys("startUrl", "rootUrl"); Kiểm tra giá trị URL gán vào biến có định dạng hợp lệ Để kiểm tra giá trị URL gán vào biến có định dạng hợp lệ, ta sẽ sử dụng Regex. Đầu tiên ta sẽ gán định dạng URL viết dưới dạng regex vào biến urlRegex và so sánh các giá trị URL trong 2 biến collection là startURL và rootURL có giống với urlRegex hay không. const urlRegex = /^https?:\/\//; pm.expect(postmanVariables.startUrl, 'startUrl does not match URL pattern').to.match(urlRegex); pm.expect(postmanVariables.rootUrl, 'rootUrl does not match URL pattern').to.match(urlRegex); Tạo biến Global để sử dụng cho request tiếp theo Kết thúc script mình sẽ tạo biến 3 biến là link, url, index cho request tiếp theo. Ở đây mình sử dụng biến Global để cho dễ truy cập và lấy giá trị giữa các request, tuỳ thuộc vào tính chất dự án, bạn có thể sửa lại thành biến cho 1 environment cũng không có vấn đề gì nhé.  links: Mảng các link ta lấy được khi crawl một trang pm.globals.set("links", "[]"); url: URL đang test pm.globals.set("url", postmanVariables.startUrl); index: Số thứ tự của URL cần test trong mảng links ta crawl được pm.globals.set("index", -1); URL check Sau khi thiết lập xong request Pre-check, ta chuyển sang request URL check, đây sẽ là request chạy chính của mình.  Ở request này, URL của request chúng ta sẽ để biến {{url}} với phương thức là GET. Dưới đây là danh sách các function sẽ sử dụng trong request này: Kiểm tra link lỗiLấy các hyperlink có trong websiteLọc các link không liên và lặp crawlKết thúc vòng lặp Trước khi bắt đầu thì ta sẽ gán giá trị URL của 2 biến collection và 3 biến Global thành các biến Local cho dễ sử dụng const startUrl = pm.collectionVariables.get("startUrl"); const rootUrl = pm.collectionVariables.get("rootUrl"); const links = JSON.parse(pm.globals.get("links")); const currentUrl = pm.globals.get("url"); const currentIndex = parseInt(pm.globals.get("index")); Kiểm tra link lỗi Giờ ta sẽ tạo 1 hàm để kiểm tra xem link mình lấy về có bị lỗi hay không. Hiện tại thì link chúng ta test ban đầu chính là URL bạn gán vào biến startUrl. pm.test(`Link to "${currentUrl}" works`, function () { try { pm.response.to.not.be.error; } catch (error) { console.log(`FAILED :: ${currentUrl}`); console.log(`FAILED :: status code is ${pm.response.code}`); throw error; } }); Trong đó hàm try để kiểm tra xem link đó có trả về response lỗi hay không và hàm catch dùng để log lại thông tin lỗi. Tuỳ vào nhu cầu bạn có thể log thêm những thông tin khác bạn muốn kiểm tra nhé. Lấy các hyperlink có trong webiste Sau khi ta đã kiểm tra link ban đầu không bị lỗi, ta sẽ chạy hàm lấy các hyperlink có trong URL đó như sau: if (currentUrl.includes(startUrl)) { const $ = cheerio.load(pm.response.text()); $("a").each(function () { const newLink = $(this).attr("href"); if (!links.includes(newLink)) { links.push(newLink); } }); $("img").each(function () { const newLink = $(this).attr("src"); if (!links.includes(newLink)) { links.push(newLink); } }); } Để lấy dữ liệu từ trang web, ta sẽ crawl HTML của web đó và tìm kiếm thông tin ta cần từ các tag có trong HTML lấy về. Trong bài viết này mình sẽ thư viện Cheerio để lấy HTML của website cần test và gán nó vào biến $. Sau khi có được HTML rồi, ta sẽ tạo vòng lặp each để tìm các tag <a> và tag <img>, sau đó  lấy các URL trong attribute “href" ở trong <a> và “src" ở trong <img>. Tiếp đến ta sẽ gán nó vào biến newLink. Ngoài ra tuỳ thuộc vào nhu cầu và tính chất của trang web, các bạn có thể bổ sung thêm các thẻ và attribute có chứa URL cần test như <link> chẳng hạn. Vì ta chỉ cần check mỗi link 1 lần nên mình sẽ viết thêm 1 hàm if để kiểm tra xem URL lấy được đã được lấy trước đó hay chưa, nếu chưa thì sẽ bỏ link đó vào mảng links. Ở bước này bạn cũng có thể bổ sung thêm các điều kiện khác để check link lấy được tuỳ thuộc vào nhu cầu của bạn như không lấy link ads hay action link,... Lọc các link không liên quan và lặp crawl Chúng ta đã đi được hơn nữa quãng đường rồi. Sau khi lấy được các link có trong web và bỏ vào mảng links, giờ ta sẽ viết 1 function để trích xuất các link đó và chạy tiếp cũng như lọc những link không liên quan. const [nextUrl, nextIndex] = getNextUrlAndIndex(links, currentIndex); function getNextUrlAndIndex (links = [], index = 0) { const nextIndex = index + 1; if (links.length - 1 === nextIndex) { return []; } const linkUrl = links[nextIndex]; if (!linkUrl) { // Skip null links console.log('Encountered a null link.'); // Try to get the next link return getNextUrlAndIndex(links, nextIndex); } if (/^https?:\/\//.test(linkUrl)) { // Return if not a relative link return [linkUrl, nextIndex]; } // If the link is relative, prepend with rootUrl const cleanedRoot = rootUrl.replace(/\/$/, ''); const cleanedPath = linkUrl.replace(/^[\.\/]+/, ''); return [[cleanedRoot, cleanedPath].join('/'), nextIndex]; } Function này ta sẽ sử dụng biến links chứa mảng link đã lấy và biến index nhằm trích xuất vị trí link ta muốn chạy tiếp. Hàm if đầu tiên sẽ check nếu như ta chạy xong hết mảng link thì sẽ trả về mảng rỗng. Hàm if thứ 2 sẽ kiểm tra loại trừ các loại link mà bạn không muốn test, ở đây mình sẽ loại trừ null link, ngoài ra bạn có thể bổ sung thêm các loại link khác như link download chẳng hạn. Hàm if tiếp theo sẽ dùng regex để kiểm tra xem link đó có nằm trong các trang con của mình hay không. Mình sẽ check bằng logic nếu như đầu URL đó giống với biến rootUrl thì sẽ truy cập tiếp vào trang đó và lấy tiếp các URL có trong trang con và lặp lại đến khi nào không còn tìm thấy nữa thì thôi. Kết thúc vòng lặp Cuối cùng chúng ta sẽ chạy 1 hàm if để kết thúc vòng lặp crawl này if (nextUrl) { // Update global variables pm.globals.set("links", JSON.stringify(links)); pm.globals.set("url", nextUrl); pm.globals.set("index", nextIndex); postman.setNextRequest("Check URL"); } else { console.log("No more links to check!"); // Clear global variables pm.globals.clear("links"); pm.globals.clear("url"); pm.globals.clear("index"); // End the loop postman.setNextRequest(null); } Trong hàm if này nếu như vẫn còn get được link từ website thì sẽ tiếp tục gán vào biến Local để chạy tiếp bằng hàm postman.setNextRequest("Check URL");. Nếu như hết link thì mình sẽ đặt lệnh clear biến global để cho gọn phần biến tránh ảnh hưởng cho những lần chạy sau và set Next Request về null để kết thúc vòng lặp. Kết Vậy là chúng ta đã hoàn thành một collection crawl website đơn giản bằng Postman. Hi vọng các bạn có thể áp dụng được vào trong dự án của mình và hẹn gặp các bạn ở những bài viết tiếp theo. Reference Crawl Website Regex Postman Collection

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.