[{"data":1,"prerenderedAt":462},["ShallowReactive",2],{"en-article-\u002Fen\u002Fblog\u002Ffree-developer-tools-hub":3,"en-related-posts-\u002Fen\u002Fblog\u002Ffree-developer-tools-hub":355},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":7,"articleCoverHeight":8,"articleCoverWidth":9,"authorId":10,"body":11,"categoriesIds":330,"description":332,"enAlternateSlug":333,"extension":334,"meta":335,"navigation":336,"path":337,"ptBrAlternateSlug":338,"publishedAt":339,"seo":340,"sitemap":341,"stem":352,"updatedAt":351,"wordCount":353,"__hash__":354},"blogEn\u002Fen\u002Fblog\u002Ffree-developer-tools-hub.md","I Built a Free Web Tools Hub for Developers","\u002Fimages\u002Fen\u002Fblog\u002Ftools\u002Ffree-developer-tools-hub.webp",null,720,1280,"thiago-nunes-batista",{"type":12,"value":13,"toc":308},"minimark",[14,18,32,37,42,50,53,56,63,67,78,82,93,97,101,112,116,126,130,134,142,146,150,158,162,166,179,183,187,191,198,201,205,208,211,215,218,221,225,239,254,258,264,271,275,278,294,298],[15,16,17],"p",{},"You know that moment when you need to generate a CPF to test a form? Or when you need to validate a fake credit card in your development environment? Throughout my career as a developer, I always relied on different websites for these simple but essential daily tasks.",[15,19,20,21,31],{},"Each site had different layouts and user experiences, some good, others not so much. Thinking about creating something that centralizes these different tools with a simple interface and excellent user experience, I created the ",[22,23,24],"strong",{},[25,26,30],"a",{"href":27,"rel":28},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools",[29],"nofollow","Código ao Ponto Developer Tools Hub",", a completely free hub that brings together several tools in one place, which are straight to the point and work without the need to create an account.",[33,34,36],"h2",{"id":35},"what-tools-are-available-in-the-hub","What tools are available in the Hub?",[38,39,41],"h3",{"id":40},"online-planning-poker","Online Planning Poker",[15,43,44,49],{},[25,45,48],{"href":46,"rel":47},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fplanning-poker",[29],"The most complete tool in the hub",". Create a room, share the link with your team (no registration required), and everyone can vote simultaneously on task estimates.",[15,51,52],{},"The tool works in real-time with WebSocket - when someone votes, everyone sees it instantly. It has a session timer, participant list with status, and voting options beyond the traditional Fibonacci sequence.",[15,54,55],{},"It's the type of tool that comes in handy when your team needs to do Sprint Planning and can't find a quality, free Planning Poker.",[57,58],"img",{"alt":59,"height":60,"src":61,"width":62},"Planning Poker tool interface",405,"\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramenta-planning-poker-gratuito.webp",768,[38,64,66],{"id":65},"cpf-generator-and-validator","CPF Generator and Validator",[15,68,69,70,77],{},"One of the most popular tools in the hub. The ",[22,71,72],{},[25,73,76],{"href":74,"rel":75},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fcpf-generator",[29],"CPF Generator"," creates valid numbers instantly for use in testing environments. This access success is due to its good position in Google search result pages for the term \"CPF Generator\", ranging between second and fourth position.",[57,79],{"alt":80,"height":60,"src":81,"width":62},"CPF Generator tool interface","\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramenta-gerador-de-cpf.webp",[15,83,84,85,92],{},"As a complement, the ",[22,86,87],{},[25,88,91],{"href":89,"rel":90},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fcpf-validator",[29],"CPF Validator"," was also created, which verifies if a number is structurally valid with immediate feedback.",[57,94],{"alt":95,"height":60,"src":96,"width":62},"CPF Validator tool interface","\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramenta-validador-de-cpf.webp",[38,98,100],{"id":99},"credit-card-generator-and-validator","Credit Card Generator and Validator",[15,102,103,104,111],{},"The ",[22,105,106],{},[25,107,110],{"href":108,"rel":109},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fcredit-card-generator",[29],"Credit Card Generator"," allows you to select the brand (Visa, Mastercard, American Express, etc.) and creates complete fictitious data: card number, CVV, and expiration date. Each field has a quick copy button next to it.",[57,113],{"alt":114,"height":60,"src":115,"width":62},"Credit Card Generator tool interface","\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramenta-gerador-de-cartao-de-credito.webp",[15,117,103,118,125],{},[22,119,120],{},[25,121,124],{"href":122,"rel":123},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fcredit-card-validator",[29],"Credit Card Validator"," automatically identifies the brand and verifies if the number is structurally valid. Essential for testing payment flows.",[57,127],{"alt":128,"height":60,"src":129,"width":62},"Credit Card Validator tool interface","\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramenta-validador-de-cartao-de-credito.webp",[38,131,133],{"id":132},"character-and-word-counter","Character and Word Counter",[15,135,136,141],{},[25,137,140],{"href":138,"rel":139},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fcharacter-and-word-counter",[29],"Counts in real-time as you type or paste text",". Shows total characters, characters without spaces, number of spaces, and total words. Useful for respecting character limits in APIs or validating form fields.",[57,143],{"alt":144,"height":60,"src":145,"width":62},"Character and Word Counter tool interface","\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramenta-contador-de-caracteres-e-palavras.webp",[38,147,149],{"id":148},"date-format-converter","Date Format Converter",[15,151,152,157],{},[25,153,156],{"href":154,"rel":155},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fdate-format-converter",[29],"Converts dates to the most commonly used formats in development",": ISO String, Timestamp, and UTC String. You can use the current date\u002Ftime or enter a specific date, with a quick copy button in the result.",[57,159],{"alt":160,"height":60,"src":161,"width":62},"Date Format Converter tool interface","\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramentas-gerador-e-conversor-de-formato-de-datas.webp",[38,163,165],{"id":164},"whatsapp-link-generator","WhatsApp Link Generator",[15,167,168,169,174,175,178],{},"Enter the phone number (with country code selection) and the desired message. ",[25,170,173],{"href":171,"rel":172},"https:\u002F\u002Fcodigoaoponto.com\u002Fen\u002Ftools\u002Fwhatsapp-message-url-generator",[29],"The tool"," generates a direct link to open the conversation on WhatsApp, with ",[22,176,177],{},"real-time preview"," showing exactly how the message will appear, including formatting and emojis. Very useful for testing texts that will be used in those tasks where the user clicks \"Contact via WhatsApp\".",[57,180],{"alt":181,"height":60,"src":182,"width":62},"WhatsApp URL Generator tool interface with pre-filled text","\u002Fimages\u002Fblog\u002Fferramentas\u002Fferramenta-gerador-de-link-compartilhavel-no-whatsapp.webp",[33,184,186],{"id":185},"design-and-usability-decisions","Design and Usability Decisions",[38,188,190],{"id":189},"frictionless-no-barriers","Frictionless, No Barriers",[15,192,193,194,197],{},"The most important project decision was: ",[22,195,196],{},"no tool requires registration",". This was non-negotiable from the start. Access, use, done.",[15,199,200],{},"For Planning Poker, which is collaborative, you can create rooms with shareable links. No login, no password, no hassle.",[38,202,204],{"id":203},"clean-and-intuitive-interface","Clean and Intuitive Interface",[15,206,207],{},"Each tool follows a consistent visual pattern: input area on the left, result on the right, and clearly visible action buttons.",[15,209,210],{},"Below each tool, there's an educational section explaining use cases, practical examples, and how that tool can help in daily work. The idea is that even someone who has never used it can quickly understand its value.",[38,212,214],{"id":213},"accessible-in-portuguese-and-english","Accessible in Portuguese and English",[15,216,217],{},"From the beginning, I implemented internationalization. The system automatically detects the browser language, but you can manually switch whenever you want.",[15,219,220],{},"Portuguese to serve the Brazilian community, English to reach developers worldwide. The architecture is prepared to easily add new languages.",[38,222,224],{"id":223},"responsive-and-fast","Responsive and Fast",[15,226,227,228,232,233,238],{},"All these tools have their ",[25,229,231],{"href":27,"rel":230},[29],"English versions with I18N"," and are tested with ",[25,234,237],{"href":235,"rel":236},"https:\u002F\u002Fpagespeed.web.dev\u002F",[29],"Lighthouse\u002FPageSpeed Insights"," to ensure good loading performance and visual stability.",[15,240,241,242,247,248,253],{},"The minimum score target was 90 points on PageSpeed Insights across all categories, which is a big challenge, especially when using third-party scripts like ",[25,243,246],{"href":244,"rel":245},"https:\u002F\u002Fdevelopers.google.com\u002Fanalytics",[29],"Google Analytics"," and ",[25,249,252],{"href":250,"rel":251},"https:\u002F\u002Fadsense.google.com\u002Fstart",[29],"Google Adsense",", but with proper optimizations, they deliver excellent loading speed.",[33,255,257],{"id":256},"the-stack-behind-it","The Stack Behind It",[15,259,260,263],{},[22,261,262],{},"Nuxt 4"," was chosen for the frontend for its focus on performance and SEO, very important aspects for good Google ranking.",[15,265,266,267,270],{},"For the backend, ",[22,268,269],{},"NestJS"," was chosen for its modular architecture and native WebSocket support, necessary for Planning Poker. It's also JavaScript-based, facilitating Full Stack development of the project.",[33,272,274],{"id":273},"whats-coming-next","What's Coming Next",[15,276,277],{},"The backlog has some interesting ideas:",[279,280,281,288],"ul",{},[282,283,284,287],"li",{},[22,285,286],{},"Sprint Retro"," for retrospective ceremonies",[282,289,290,293],{},[22,291,292],{},"More utilities"," as the community suggests",[33,295,297],{"id":296},"want-to-check-it-out","Want to Check It Out?",[15,299,300,301,307],{},"The tool has been helping hundreds of users daily, you can also be one of them ",[22,302,303],{},[25,304,306],{"href":27,"rel":305},[29],"by clicking here",", I hope to help you, thank you very much 🙋🏻",{"title":309,"searchDepth":310,"depth":310,"links":311},"",2,[312,321,327,328,329],{"id":35,"depth":310,"text":36,"children":313},[314,316,317,318,319,320],{"id":40,"depth":315,"text":41},3,{"id":65,"depth":315,"text":66},{"id":99,"depth":315,"text":100},{"id":132,"depth":315,"text":133},{"id":148,"depth":315,"text":149},{"id":164,"depth":315,"text":165},{"id":185,"depth":310,"text":186,"children":322},[323,324,325,326],{"id":189,"depth":315,"text":190},{"id":203,"depth":315,"text":204},{"id":213,"depth":315,"text":214},{"id":223,"depth":315,"text":224},{"id":256,"depth":310,"text":257},{"id":273,"depth":310,"text":274},{"id":296,"depth":310,"text":297},[331],"tools","I created a free web tools hub for developers: CPF generator, validators, Planning Poker and more daily utilities, in Portuguese and English, with no sign-up.","free-developer-tools-hub","md",{},true,"\u002Fen\u002Fblog\u002Ffree-developer-tools-hub","hub-de-ferramentas-gratuitas-para-desenvolvedores","2026-01-06",{"title":5,"description":332},{"loc":337,"images":342,"lastmod":351},[343,344,345,346,347,348,349,350],{"loc":61},{"loc":81},{"loc":96},{"loc":115},{"loc":129},{"loc":145},{"loc":161},{"loc":182},"2026-10-06","en\u002Fblog\u002Ffree-developer-tools-hub",952,"TaF5lI57uyi5DI04hKg3rGxUwsitM4_NctybZAcquMI",[356,365,367,376,383,391,398,406,413,421,427,435,442,448,455],{"id":357,"path":358,"title":359,"articleCover":360,"categoriesIds":361,"publishedAt":364},"blogEn\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo.md","\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo","Core Web Vitals and SEO: How User Experience Affects Your Site","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcore-web-vitals-how-user-experience-affects-seo.webp",[362,363],"seo","web-vitals","2024-10-25",{"id":4,"path":337,"title":5,"articleCover":6,"categoriesIds":366,"publishedAt":339},[331],{"id":368,"path":369,"title":370,"articleCover":371,"categoriesIds":372,"publishedAt":375},"blogEn\u002Fen\u002Fblog\u002Fhow-the-routing-system-works-in-nuxt.md","\u002Fen\u002Fblog\u002Fhow-the-routing-system-works-in-nuxt","Nuxt Routing: Dynamic, Nested and Catch-All Routes","\u002Fimages\u002Fblog\u002Fnuxt\u002Fnuxt-routing-thumb.webp",[373,374],"nuxt","vuejs","2025-03-12",{"id":377,"path":378,"title":379,"articleCover":380,"categoriesIds":381,"publishedAt":382},"blogEn\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n.md","\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n","How to Add Special Characters in i18N Translations","\u002Fimages\u002Fblog\u002Fi18n\u002Fi18n-special-characters-on-nuxtjs-thumb.webp",[373,374],"2025-02-02",{"id":384,"path":385,"title":386,"articleCover":387,"categoriesIds":388,"publishedAt":390},"blogEn\u002Fen\u002Fblog\u002Fhow-to-create-and-set-up-ssh-key-github.md","\u002Fen\u002Fblog\u002Fhow-to-create-and-set-up-ssh-key-github","SSH Key in Git: How to Set Up an SSH Key for GitHub","\u002Fimages\u002Fen\u002Fblog\u002Fgit\u002Fhow-to-create-and-set-up-ssh-key-github-thumb.webp",[389],"git","2025-02-04",{"id":392,"path":393,"title":394,"articleCover":395,"categoriesIds":396,"publishedAt":397},"blogEn\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs.md","\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs","What is Structured Data and How to Add it in Nuxt.JS","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",[373,374,362],"2025-01-22",{"id":399,"path":400,"title":401,"articleCover":402,"categoriesIds":403,"publishedAt":405},"blogEn\u002Fen\u002Fblog\u002Fhow-to-deal-with-envy-from-other-programmers.md","\u002Fen\u002Fblog\u002Fhow-to-deal-with-envy-from-other-programmers","How to Deal with Envy from Other Programmers in Your Career","\u002Fimages\u002Fen\u002Fblog\u002Fcareer\u002Fa-nail-that-stands-out-gets-hammered.webp",[404],"career","2025-08-29",{"id":407,"path":408,"title":409,"articleCover":410,"categoriesIds":411,"publishedAt":412},"blogEn\u002Fen\u002Fblog\u002Fhow-to-use-middlewares-nuxtjs.md","\u002Fen\u002Fblog\u002Fhow-to-use-middlewares-nuxtjs","Middlewares: What They Are and How to Use Them in Nuxt.JS","\u002Fimages\u002Fblog\u002Fnuxt\u002Ffront-end-middlewares-thumb.webp",[373,374],"2025-02-03",{"id":414,"path":415,"title":416,"articleCover":417,"categoriesIds":418,"publishedAt":420},"blogEn\u002Fen\u002Fblog\u002Fhow-to-validate-cpf-with-javascript.md","\u002Fen\u002Fblog\u002Fhow-to-validate-cpf-with-javascript","How to validate a CPF with JavaScript","\u002Fimages\u002Fen\u002Fblog\u002Fjavascript\u002Fhow-to-validate-cpf-with-javascript.webp",[419,331],"javascript","2026-10-04",{"id":422,"path":423,"title":424,"articleCover":425,"categoriesIds":426,"publishedAt":420},"blogEn\u002Fen\u002Fblog\u002Fhow-to-validate-credit-card-with-javascript.md","\u002Fen\u002Fblog\u002Fhow-to-validate-credit-card-with-javascript","How to validate a credit card with JavaScript (Luhn algorithm)","\u002Fimages\u002Fen\u002Fblog\u002Fjavascript\u002Fhow-to-validate-credit-card-with-javascript.webp",[419,331],{"id":428,"path":429,"title":430,"articleCover":431,"categoriesIds":432,"publishedAt":434},"blogEn\u002Fen\u002Fblog\u002Frecovering-lost-files-in-git-with-vscode.md","\u002Fen\u002Fblog\u002Frecovering-lost-files-in-git-with-vscode","Recover Lost Files in Git Without a Commit Using VS Code Local History","\u002Fimages\u002Fen\u002Fblog\u002Fvscode\u002Fhow-to-recover-lost-files-in-git-using-vscode.webp",[389,433],"vscode","2025-01-21",{"id":436,"path":437,"title":438,"articleCover":439,"categoriesIds":440,"publishedAt":441},"blogEn\u002Fen\u002Fblog\u002Fvercel-buys-nuxt-labs.md","\u002Fen\u002Fblog\u002Fvercel-buys-nuxt-labs","Vercel Acquired Nuxt Labs! What Does This Mean for Nuxt?","\u002Fimages\u002Fen\u002Fblog\u002Fnuxt\u002Fvercel-buys-nuxt-labs.webp",[373],"2025-07-17",{"id":443,"path":444,"title":445,"articleCover":446,"categoriesIds":447,"publishedAt":351},"blogEn\u002Fen\u002Fblog\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it.md","\u002Fen\u002Fblog\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it","Vue Vapor Mode: what it is and what changes in Vue 3.6","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it.webp",[374,373],{"id":449,"path":450,"title":451,"articleCover":452,"categoriesIds":453,"publishedAt":454},"blogEn\u002Fen\u002Fblog\u002Fwhat-are-directives-in-vue-and-how-to-implement-them.md","\u002Fen\u002Fblog\u002Fwhat-are-directives-in-vue-and-how-to-implement-them","Vue 3 Directives: Built-in and Custom","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fwhat-are-directives-in-vue-and-how-to-implement-them.webp",[374],"2025-03-21",{"id":456,"path":457,"title":458,"articleCover":459,"categoriesIds":460,"publishedAt":461},"blogEn\u002Fen\u002Fblog\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs.md","\u002Fen\u002Fblog\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs","Composition API vs Options API in Vue.js: What's the Difference?","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs.webp",[374],"2025-02-20",1791682334567]