The latest articles on DEV Community by Andres Gutierrez (@andreseg). https://dev.to/andreseg https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F725955%2F1585178e-bf0f-4e61-971c-445b0959eb71.png https://dev.to/andreseg en Andres Gutierrez Thu, 14 Oct 2021 22:27:05 +0000 https://dev.to/andreseg/use-gmail-without-a-mouse-4md9 https://dev.to/andreseg/use-gmail-without-a-mouse-4md9 <p>Hi there! We created an open source framework for Ctrl + F that selects buttons on the page vs. only text and lets you press enter to navigate to them. It's open source and it lets you navigate tools like Gmail, Github, and yes, even tools like Dev.to without touching your mouse! </p> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/y7wGtyeEoKQ"> </iframe> <br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/comake" rel="noopener noreferrer"> comake </a> / <a href="https://github.com/comake/yip-yip" rel="noopener noreferrer"> yip-yip </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">YipYip</h1> </div> <p><a rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13453719/136746212-e744bc0e-4830-4abf-9a47-59c21892d72a.png"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F13453719%2F136746212-e744bc0e-4830-4abf-9a47-59c21892d72a.png" alt="image"></a></p> <p>YipYip is an always-on search assitant that turns Gmail (and any other website) into a keyboard-first product.</p> <p>Just type to search.</p> <p>YipYip highlights any buttons or links in the page matching your search.</p> <p>Press Tab to jump through the matches.</p> <p>Press Enter to select the current match.</p> <p>Voila!</p> <p>Video Demo: <a href="https://www.youtube.com/watch?v=y7wGtyeEoKQ" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=y7wGtyeEoKQ</a></p> <div class="markdown-heading"> <h2 class="heading-element">Extension store listings</h2> </div> <p><a href="https://chrome.google.com/webstore/detail/yipyip/flbkmacappdledphgdoolmenldginemg/" rel="nofollow noopener noreferrer">Google Chrome Extension</a><br> <a href="https://addons.mozilla.org/en-US/firefox/addon/yipyip/" rel="nofollow noopener noreferrer">Firefox Extension</a><br> Edge Add-On (Coming Soon)</p> <div class="markdown-heading"> <h1 class="heading-element">How it works</h1> </div> <p>When a user types in the YipYip search bar on a webpage, YipYip recursively scans through the webpage's DOM node tree to find all nodes which match the users query. Whether a node matches the query or not is determined by detecting if any text within the node includes the user's query or if an attribute of the node includes the user's query.</p> <p>Not all attributes a node may have are relevant for our purposes, thus, YipYip only searches a specific list of…</p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/comake/yip-yip" rel="noopener noreferrer">View on GitHub</a></div> </div> productivity opensource javascript