Forem: Ianeta Hutchinson

Make code tutorials in seconds with explanations from AI.

Ianeta Hutchinson — Tue, 13 Sep 2022 18:43:57 +0000

We're using explanations from ExplainDev to help you make and share beautiful, useful images that explain code.

app.explain.dev is an image creation tool that uses ExplainDev to provide explanations to the code that's entered. Users bring their own code, then have full rein on customizations.

Here I am making the image used in the banner:

How it works:

Head to app.explain.dev and start typing your code into the box provided. (You can choose the language in the side-bar for improved syntax highlighting, etc.)
As soon as you stop typing, an explanation will appear at the top of the image.
All elements in the image are editable including the text that was generated by AI. Resize and/or drag the snippet to wherever you'd like it placed.
Select portions of the code to get specific explanations for what you have selected. Click the "explain code" button to generate the new explanation.
Use the side bar to customize text, background, arrow positioning/style/color, and more!
Add any additional code or text boxes using the options at the top banner.

Download the image and SHARE!!

The technology behind the images is ExplainDev, an AI powered programmer's assistant. You can think of it as an expert that's always available to answer your technical questions and explain code. This nifty app idea came while working on our API in preparation for a big move to VS Code.

Content that is useful and teaches me stuff is the best kind of content. So we decided to try and enable more of it. I hope that this tool might also unlock some folks who don't share much about their new programming discoveries to go for it!

Let me know what you think! Or better, tag me in your creations!!

Use AI to understand the code on GitHub, StackOverflow, and docs sites.

Ianeta Hutchinson — Tue, 01 Feb 2022 02:14:22 +0000

Powered by OpenAI, ExplainDev is a browser extension that explains the code you see on GitHub and elsewhere on your browser.

As a developer, you are constantly researching and reading code on your browser - especially when you’re learning a new language. ExplainDev is a developer tool that helps you to quickly understand the code that you’re reading, right when and where you find it.

ExplainDev is a browser extension that appends an Explain button to code on GitHub, StackOverflow, and documentation websites to explain what the code is doing in plain english.

Explanations are generated by OpenAI Codex, the same AI system powering GitHub Copilot. Trained on billions of lines of public code, the advanced AI is capable of explaining Python, C++, JavaScript, TypeScript, Rust, Ruby, PHP, HTML, JSON, Bash, and many more languages.

By just clicking on the Explain button that’s added to the code you're browsing, you'll get an explanation of what that code does. If there’s a certain part of the code that’s confusing, you can also highlight what you want to understand, and click the Explain Selection button.

ExplainDev helps you to understand code quickly so you can get back to your work, and apply what you’ve learned.

ExplainDev is in Private Beta. If you are interested in trying this new technology, you can get access on the website: https://explain.dev/.

Quick info for JavaScript and TypeScript Code Snippets while you browse!

Ianeta Hutchinson — Wed, 03 Nov 2021 19:14:43 +0000

When a website includes a code snippet, Kmdr kicks in to help you understand the code. Version 5.0 of Kmdr's browser extension includes quick info for JavaScript, CSS, HTML, Bash, TypeScript, SCSS, and LESS via mouse over.

There's a lot we're excited to share in the latest release of the Kmdr browser extension! A long time coming, version 5.0 brings support for JavaScript, TypeScript, LESS, and SCSS as well as extended coverage for CLI commands and HTML. Beyond quick info, with the new release comes a new technical base that brings cross-snippet referencing and exciting potential for future user customizations. Read on for details on what's changed and being introduced in Kmdr 5.0.

Quick info for JavaScript and TypeScript

Prior releases of Kmdr detected JavaScript code snippets and gave users consistent syntax highlighting. Now, users can mouse over key words in JavaScript and TypeScript code snippets and get rich metadata about JS standard built-in objects, including their methods, parameters and properties. Any annotations included in snippets using JSDoc are referenced in quick info so that users can quickly see declarations just as they would in Visual Studio Code. Cross-snippet referencing is also enabled this release so that any declarations made in code snippets early on in a webpage are referenced in quick info for snippets later down the page.

Better support for HTML and CSS

We've improved syntax highlighting and verbosity for HTML and CSS so that it's at parity with VS Code. We've added quick info for HTML elements so they're as interact-able as HTML attributes in previous releases. Now, when you mouse over an HTML element, you'll see a definition for the element and a link to trusted documentation where you can learn more on how to use it in your code.

Coverage for LESS, and SCSS

Code snippets that are documented as LESS or SCSS now have syntax highlighting, trusted documentation links, and quick info on mouse over! We will continue to expand on web technology coverage with more JavaScript frameworks and libraries throughout the month of November.

Today's release is a pivot from save and share features as we focused on building out the programming assistant for web developers. Kmdr's quick info in this and the upcoming releases will help web developers review and quickly understand code examples on the web and find the best solutions on their own and with fewer tabs open.

The Kmdr extension will automatically update for current users. New users can head here to install today on Chrome. When a website includes a code snippet, Kmdr kicks in to help you understand the code.

Get Descriptions on Bash, HTML, & CSS snippets in your browser

Ianeta Hutchinson — Tue, 22 Jun 2021 14:54:54 +0000

Online resources play an enormous role in solving problems related to our code. Studies clock developers as using up to 20% of development time looking at or for code examples (think: documentation, forum based bug-fixes, task centric blogs, etc)[1,2,3].

Myself and 3 others built a browser extension for bringing IDE/Editor features to your browser. We supplement snippets on the web as you browse so you can consume the code more easily and get back to writing your own code, faster.

Previously only Bash, we've just finished the work to detect then supplement CSS, HTML, and JavaScript code snippets! Now you can see consistent syntax highlighting across all Bash, CSS, HTML, and JS snippets and get descriptions on mouse over for:

Bash: Commands, Sub-commands, Options
HTML: Element, (Attributes will be in later this week)
CSS: Properties

Interact with the snippets on our website to get a feel for how snippets appear with the Kmdr browser extension installed. If you'd like to kick the tires, give Kmdr a whirl (for free) here then please let me know what you think!

Kmdr in action: Checkout the GIFs below (they are monsters so may take a while to load).

Bash:

CSS:

HTML:

Get CLI command syntax explained, then save and share in a personalized cheatsheet.

Ianeta Hutchinson — Fri, 15 May 2020 14:25:53 +0000

The kmdr browser extension leverages a huge, human-validated explanation repository to explain the syntax of CLI commands in any website you find them. We are happy to announce a new feature coming to your browser - saving commands you've explained to populate a personalized cheatsheet.

Save time and help boost productivity by saving frequently searched commands and their definitions to your custom cheatsheet. Every kmdr account now has a cheatsheet and you can populate yours by hitting the save command button on the explanation pop-up window. The explanations on your cheatsheet are embedded in the code blocks on the page and are visible on mouse over. Folks you share your cheatsheet with are NOT required to have kmdr installed so will be able to learn commands right away.

You can see Eddie's cheatsheet here: https://app.kmdr.sh/ediardo

You can now also see the list of programs with kmdr definitions (currently standing at 425). The kmdr backend contains 1,643 subcommands and 15,320 options for these programs, too.

Head to the Chrome Web Store to add the kmdr browser extension and let me know what you think!

Ianeta

It's here! Right click to explain commands on your browser

Ianeta Hutchinson — Tue, 07 Apr 2020 00:53:06 +0000

The kmdr browser extension breaks down commands to return descriptions of each attribute. Simply select the command you want to understand and right-click for the explanation. The modal window rendered contains what you selected with syntax highlighting and displays descriptions upon mouse over.

By running as a browser extension in Chrome and Firefox, kmdr will allow you to more quickly understand program syntax when and where you find commands. kmdr works on commands within web app messages, on GitHub or GitLab, in official documentation, StackOverflow, or any other website where code is selectable.

The browser extension is more powerful than its CLI predecessor in that it can explain multi-line commands, more complex bash constructs, and performs 100x faster (yes, 100). kmdr explains the syntax common in bash scripts by detecting commands within constructs like loops, sub-shells, and command substitutions. The common documentation practice of using $ prompts is accounted for in the browser as well as comments preempted by #.

We’re inviting members of our mailing list to access the browser extension early as participants in our user study. To be included in the pre-release study, please join our mailing list.

See our updated website for more information on the browser extension including an FAQ, gallery, and option to pre-order at an early adopter price.

Sharing command line expertise: Mouse over attribute to get explanation.

Ianeta Hutchinson — Thu, 19 Dec 2019 16:51:59 +0000

In kmdr v0.4, we are introducing Explain Session web pages and enabling kmdr users to share command explanations from the cli. Bringing kmdr to the browser is a milestone on our path to a browser extension that will provide attribute level explanations of any commands you select.

An Explain Session web page features the command as a code snippet with each of its attributes explained through pop-ups triggered by mouse-over. Viewers can also sign-up for exclusive access to the incoming browser extension through the web page.

The install instructions featured also have mouse over explanations and showcase the use case for embedding kmdr explanations into documentation.

See explanation session web page from the git example above.

Explanation session web pages can be created by any kmdr v0.4 user. The option to share explanations via URL is provided after every command query.

Upon choosing the share option, you will be prompted to input a summary of the command. The summary is rendered as the title of the Explain Session web page when opened in a browser.

The next milestone en-route to a browser extension is user account creation. This feature will ensure synchronization between CLI and browser as you discover new commands, want explanations, and then execute. To gain exclusive access to new features, sign up to our newsletter!

Right click to explain commands..That's what's next.

Ianeta Hutchinson — Tue, 03 Dec 2019 08:17:27 +0000

With a foundation of explanations established, we are now looking to bring kmdr more seamlessly into different development workflows. A browser extension will allow users to quickly check what all of the attributes of a command do before copying to the terminal.

Kmdr description webpage in the design phase

kmdr being in the terminal is particularly handy for those testing their memory of options or getting help via irc; however developers are also finding new commands on their browsers via sites like Stack Overflow or in a projects online documentation. The kmdr web extension is for devs in a “research session” within their browser, who value time over tabs and want concise and accurate explanations of a command ASAP.

The two-steps-away vision is the ability to select a command from anywhere in your browser and right click for access to the kmdr description.

The first milestone in the web-extension will be the ability to share kmdr descriptions via a URL provided by the CLI client. Users will be able to send and bookmark the URL of a kmdr description which will be rendered as an orphaned web page.

Invitations to early iterations and access to the browser extension will be coming to folks via our newsletter. Sign up today.

Tally-ho!

Establishing the foundation for feedback

Ianeta Hutchinson — Tue, 03 Dec 2019 07:47:19 +0000

The first feature and focus of kmdr has been to deliver a break down of commands with every attribute explained. After 100 days in the wild, we have a base from which we can now explore new features and engage in more pathfinding. Here’s one view of our road here:

kmdr v0.1: Get it out!

We launched able to explain the commands of about 50 programs. The command explanations were sourced from manual pages using an imperfect parser which meant a lot of data needed refinement. The initial release was enough to prove that users 1) found value in easily accessing command explanations, and 2) were willing to install a program in the terminal to access the description breakdown.

kmdr v0.2: The grind

We took on the task of improving the quality of definitions with human verification. This meant comparing the output of our parser with official online documentation when it existed, and --help on the occasions docs weren’t available. After doing this, we set to extend coverage. We made a huge list of programs we wanted to cover. We prioritized against what we understood to be the most popular, basing our list on websites like tldr pages, a plethora of articles, and things we ran everyday in our own terminals. We had achieved coverage on 200 programs, organized across 18 categories, before we had reached a critical mass of users and could iterate instead based on usage and feedback.

kmdr v0.3: Finding patterns

With a log of queries surpassing 2,700 we are now able to invest resources (aka our free time) where we have data to support value-add. We also have the data to support slowing investments and focusing instead on pathfinding. From missing program definitions to OS’s, package managers, and shells to support, usage data and real user feedback helps us prioritize and informs our next steps. We now know what the most popular programs are and know that their descriptions are covered. This knowledge allowed us to extend the learning experience and provide concise examples for these programs. We also are seeing that the web-based demo accounts for more than 35% of usage. This gives us confidence in our next move toward a GUI.

Use kmdr today to better understand CLI commands and be more productive from your terminal. Join the 20% of our users who provide feedback and help us shape the future of this product!

Tally-ho!