Hello! To change tack a little bit, I am here to talk about my small project which maybe has the scope of a single feature of these other projects that we've just heard about.

My name is Casper Manuel. I'm an electronic design engineer and software developer. I use these languages listed there. I do PCB layout using KiCad. I'm often on the KiCad mailing list in IRC.

And I work as a freelance consultant. But I'm here to talk about a little tool that I made to kind of scratch my own itch. And it's a browser extension to quickly add components to retailer shopping carts because

that is something that is very boring and tedious and that's why I made this. I only have a very limited amount of time so I'm quickly going to cover what it does, how it does it and what it might do in the future if I manage to find some time to develop it further.

Or if someone else would like to contribute something. So what does it do? I've skipped the video which shows you what it does. So the idea is that you have your filler materials in a particular format.

The other is you have your line note which really can be anything but it's useful to have schematic references in there. And you have your quantity and then you name a retailer that you want to purchase from and you put your retailer part number in third, fourth and you can then copy.

Moving over to the browser, you can open the extension and just paste that data into there and you then get a nice overview of what you're trying to purchase.

You can quickly open the cart tabs and you can select them. If you've got parts in there already, you can easily clear them because you might not want those particular things for that project.

So the main feature is that you then quickly add these components to shopping carts. And you get all your references in there. That means when you get your components, you basically have almost in a kit format that you can then use to assemble.

So obviously retailers already have these kind of tools available. Individual retailers do kind of quick paste kind of things but the advantage of this is that it unifies the format. It doesn't matter which retailer you're going to use. It's always the same format

and it just generally streamlines the process of managing your cart and emptying it. Some of the retailers, it takes a surprising amount of clicks to actually empty your cart and things like that. They do some annoying things like that which you don't really want to deal with. And one important thing for me when designing it was that it always gave you really clear feedback on what went wrong, if something went wrong.

So I use these notifications there that give you errors or warnings depending on how severe I think the situation might be.

One neat little feature that I added was that if you've got separate values online, then you can quickly, this kind of blue badge and button appears there and you can quickly add those components directly from a website.

So it's kind of enables really quick sharing of builds and materials as well. So the features currently are, it's a Chrome extension. I'm currently working on a Firefox port. It supports these retailers listed there in over 100 locations.

So you set what country you're in and it chooses the right retailer website depending on that. I've used the CPAL license which is maybe a little controversial but it's a Free Software Endorsed license. Free Software Foundation Endorsed license and OSI approved but I'm the sole contributor anyway so if you've got a problem with the license, I'm probably willing to re-license it.

So let's cover how this works. Like I previously mentioned, it passes tab-separated values which is the clipboard format of most spreadsheet formats, spreadsheet programs.

It's kind of an easy format to pass because nobody really wants tabs in their actual data so it's a nice delimiter and fairly trivial to pass. What it really does is mimic the HTTP requests that the retailer sites themselves cause your browser to send and

then quickly passing the HTML responses and using quick and dirty indicators to determine whether what you wanted to happen happened. Just a quick note on how HTTP works in case there's people who don't have never really done anything with that.

It's either a get to a post request or there's some other more obscure ones which are used less often or at least not in my situation. The parameters that you want to pass to your site are sent along with a request and it returns a status which some of you have surely seen a 404 status or a 403 status.

So is that time left? The return status and the response usually HTML and cookies are used to persist data during your session.

So I spent a lot of time in the in the browser tools debugging HTTP requests and having a look at what these sites actually send when you add components and it's not a very clean API. This is what you have to do type on the command line if you want to add a component if you want to add this creating component to the Mauser website.

This actually I've truncated this year. This goes on for 20,000 characters, which is the view state of the web application. I have no idea what that's for, but I have to retrieve it and I have to send it in order for my request to be accepted.

So the architecture is it's written in CoffeeScript, which is a little language that compiles to JavaScript because JavaScript is the only thing that will run in browsers. It's an object oriented design. It has a barrage of automated functional tests and a simple GUI.

So I've already covered CoffeeScript. It's a small language that compiles to JavaScript. It has a nice kind of Python-esque syntax and very kind of. Clear and to us, you see that's a function application. The add component is actually function application, which is generated. Into that, and that's a nice little list comprehension. There's a lot of good things about CoffeeScript.

The reason I chose it at the time is that I hadn't written JavaScript in a long time and kind of guides you along to writing good JavaScript. It's very close to the JavaScript itself. And another reason was that it has classes and I wanted to do an object oriented design, so that was another reason.

You might not want to choose it because it's another level of extraction. You have the other compilation step and you need to use source maps and other things. So the object oriented design, the main thing is I have a retail interface, which is extended by each of the individual retailer objects or classes.

The main methods you can see here, these are method declarations. You can refresh the cards, refresh the site, and the main operations

are then implemented in each individual class of adding items and clearing the cards, which are really very dependent on what site it is. So this abstraction worked really well in some ways. For instance, Funnel switched over to using a New York style site.

So they were reusing what they had implemented for New York in the Funnel sites over here, and I noticed this came up in my test. It wasn't working anymore. And all I simply had to do was detect that this was happening and replace all my methods with the one I'd already implemented for New York. So I was very happy about that. In other ways, I don't really like the abstraction because often I am

using, there's no, the concept of instantiating different objects doesn't always make sense. For instance, I have this bomb manager class and I can create a new bomb manager, but really there is only one bomb manager and the bomb manager kind of has all the retail interfaces and takes care of doing bigger operations on all of them.

And maybe it wouldn't be, I don't really need a second one, so I don't know why I need to instantiate it. A similar thing goes for having different country instantiations of this DigiKey object, for instance.

Really there's only, you're ever only in one country, so I don't know. It shouldn't really be, need to be possible that I need, I can do that. So that's where the abstraction falls down from here. So the automated functional tests, I used a framework called QUnit and it kind of gives me this

nice little overview of tests that are passing and failing and would do a diff if something fails. I didn't, I couldn't really do a lot of unit tests. What you see here was the unit testing that I managed to do because basically the tests are heavily dependent on the network. And I did, there's obviously those are the unit tests there, but then there's a much larger amount of tests which actually go

to the site and tests for each individual, each country tests the responses and sees that this kind of interaction is working correctly. But I run into problems because, you know, the network requests can time out or I get forbidden to access the site for that moment because I'm sending too many requests.

Which is something which are really only really happens in the test situations and not in actual use of the plug-in of the extension. It has a very simple UI, just as you saw initially in the video, if you've got no data, there's only

one button to press really and afterwards you have these operations, these five operations that you can do and that's really it. I didn't use any UI libraries for this. I found that JavaScript at the moment is enough for manipulating the document object model.

I use as many Chrome features as possible to kind of ease the development, like this little badge there. I didn't have to re-implement the icon to get that badge to appear. That's, you know, a specific Chrome feature. So what might I do in the future? Right now it's Chrome only and there's about 200 weekly users. That's the statistics I get from the Chrome web store.

Which means 200 users that start their browser in the last week with the plug-in enabled. So kind of a really specific statistic there. So the upcoming features of Firefox support, I don't think it's really that important to current users

because it's the kind of tool that you, when you need it, you might just install it. You could open Chrome for that bit and just do your purchase and then close it again. It's not necessarily, you don't necessarily need Firefox support but I want to get it in now so that as I develop it, I can develop for both platforms simultaneously.

Allowing, so the big, the features that I'm excited about, I have a whole roadmap online on the website but the features that I'm excited about are allowing multiple retailers per item. The format is kind of allow us for that because the retailer and the part number are the last thing so you could just keep repeating that for different retailers and then you could make bigger builds of materials that cover up all possible retailers.

And this thing would then really allow for people to publish their bill of materials online and then allow users to quickly just click on an icon on there and order those components.

If you combine that with the Gerber online that you can send to a low cost PCB manufacturer, you essentially have a kit with all the references labeled at your doorstep. Then for even further on, I want to kind of find the same components from different retailers so you can

just input your sync. You're the ones you are purchasing and then hopefully the tool can figure out what that might mean for other retailers so that you can generate larger bombs that other people can use for their preferred retailers and maybe my 1.0 goal really is to have a function to minimize the cost of your bill of materials.

Kind of figuring out what the lowest cost plus shipping would be. Save everyone money. And that's it.

I did not know. Oh, the question was whether I consider any of the suppliers to see if they would expose a sensible API and I did

not. I don't think I would have got much of a response and not in the time that I wanted to implement this anyway. I did kind of find out for a while because I noticed they were switching over their sites and they gave me some information as to when they were doing that, although it wasn't very good, but it was some information.

There's I don't have the tool doesn't have any database. It just or I guess you mean the sorry. I will repeat the question. The question was whether the two would what would happen. Essentially, if you try and add a component that's not in currently in stock.

Yes, so in that case it will give you. It depends a little bit on the site, but it will give you an error in the sites where you can't do anything about it on Digi Key. There's it just it goes through and there's a suggestion by the site for an alternative component.

And that is kind of automatically added and those I've looked at those suggestions there normally just because they've changed their their internal number. So it is the same component.