 So, if you were here previously, you know my name is Casper and I'm an electronic design engineer and software developer. This talk is about a web service and browser extension that I've been working on, which is to make it easier to replicate electronics projects once their design is finished. So, I'd like to give some context for the motivation behind this and I grabbed some statistics from various places about to try and gauge the number of electronic engineers there are in the world and how that compares to software developers. So, you know, you can look at these statistics here and kind of guesstimate the amounts of people there are in the world working on electronic engineering versus software. So, kind of in summary, there's about one EE to every three programmers, maybe. And then, when you think about it, there's maybe, you know, one in ten software engineers, no C. And if you compare the kind of forums on electronics versus C programming, if you just reduce the subset, you get quite favorable numbers for electronics, really. And the question, really, is where is the Linux of electronics? And this is, a lot of people think about this, this is actually the logo from the open hardware repository from CERN and I think it captures that idea quite well, you know, why isn't this happening? And of course, you know, it's not software and there's a lot of labor and kind of physical movement and things that have to happen to make electronics happen, but there's a lot of automation as well, so this is a pick and place machine which, you know, it's quite advanced automation and board prices are going down. You can interact, as a design engineer, you can iterate quite quickly on a hardware project because it doesn't cost that much to get a board made anymore and it's more accessible for everyone. And we do share projects, so I did a survey a while back and there's about 3,000 KiteCAD projects on GitHub, about 7,000 Eagle projects, and Oshpaq, which is a PCB batching service, they have a kind of little project there, sharing thing where you can download Gerbys for projects, there's about 9,000 projects on there, and there's all Hackaday and EV, blog forums and all these different ways of sharing projects. I think, and it's an interesting problem to look at, I think, and I think part of the problem is maybe we have a heritage of doing very amazing things, but not making it so understandable for other people to replicate that. This is a picture from, oh shit, I didn't run down the reference. I think it's at the end, it's Bob P's, I can't remember the title of the book, but... So my kind of approach to this was we want to have all these different ways of doing things, like the KiteCAD and all the different ways of sharing things and all the different ways of making PCBs and kind of mung it all up and at the end of it, what do you really want? You want the PCB and you want the parts to make the PCB, so my approach to this is the KITNIC.it website, which is a project sharing website, and the OneClick Bill of Materials browser extension, which works in your browser to replicate web requests to try and automatically put things into retailer shopping carts. So this is the OneClick One browser extension that was first presented in 2015, and it's still there, still works. It automates purchasing by replicating the web requests that are sent to use retailer sites. So it currently works for Digikey, Mouser, RS, New York, Farno, and Element 14. And you might ask why does this need to be a browser extension? Can't you just make a website that automatically puts things into carts? Well, not really, and there's some exceptions to this, but basically the retailer website would have to allow pretty much your specific website or you to do this. So this is a quote from the same origin policy is what is implemented in browsers basically to prevent one site from messing with your data on another site. And there's a good little comic about that, but I'm not sure. I think now is a good time for everyone to read this. I'm not sure why I put that in there, but I'm going to skip it. So you can look up the slides and look at the comic. It's quite cute. This is the kind of request you have to send for, what is this, the Mouser site to add something to a cart. And there's quite a lot of stuff in there, and maybe you don't strictly need. But the crucial thing, actually, is this view state element, which goes on thousands and thousands of bytes for some reason. And you need to send that to modify the user's cart. So the way I kind of handle this complexity of all these different retailers, all the different countries, and these kinds of lengthy requests is I use a lot of testing and make sure that it works across all the different sites in all the different countries using this integration testing. So this one is a test for FANEL, and it checks for each country that it can add some parts to the cart, checks the cart, and you can empty it. And if there's a failure, if there's something fails, it will notice. And also, often the way the retailer sites work is if something fails, it'll be in your cart for you to see. But really, if you want the extension to work, you should be able to clear that out again and try the next operation. So this is what the extension looks like. And it's kind of meant to be used in conjunction with the spreadsheet on one side. And you can copy from the spreadsheet into the extension and copy out of the extension back into the spreadsheet. So there are five retailers that are currently supported. And you can add to the cart and empty the cart. So this is available for Chrome and Firefox currently. It works on tab separator values, which is the clipboard format for spreadsheets. You can also load an online bomb. So if you share a bill of materials on GitHub or somewhere in the right format, you can just load it directly into the extension. It can, I've been working on features where it can try and complete. Like if you give a description for a part, it will try and find the right part for you. There'll be more on that later. It's open source, CPL license, and it has about 500 users. So back to this kind of weird analogy here. We have a way of replicating purchases from one person to the other. And you can do that across the globe. But it doesn't include the PCB necessarily. And there's no neat way to package everything together. So this is kind of what the KitNikit website is for. And the way that works is you put everything into a Git repository, you use the format that the extension understands and the website understands as well, which is the one-click bomb tab separator values. You need at least references, quantity, and a part number to kind of, that's like the minimum that you should be able to specify about your project. And we use our 274x Gerber as an excellent drills. And so this is kind of the minimum file tree that you would have. You'd have the TSV and the Gerber files. So we're going to try and do a live preview of the website. Oh, right, yeah. Here we go. Hold on a second. So that's the front page. And there's a, where's my scroll bar? I'm sure that's not the website's fault. How do I scroll on this? Have you? Nope. I'm paged down with all this work, right? Here we go, OK. So these are some projects that are on there already. We can maybe select one. So it's a small FM transmitter kind of demo project. So it's got a nice rendering of the Gerber files. And it's got a link here to get the Gerbers. There's links here, like a short description and a website link for more info and the repository link. And here is kind of the magic where you need the browser extension. Except in some instances, I've actually found that DigiKey has enabled cause requests to add parts completely and New York and Farnel as well, except the extension kind of works better because there's less friction in doing so. You won't be prompted for decisions. Like for New York, you might be prompted to make a decision whether you want to buy more parts for less money, which you don't really want to be prompted for that. So it's even less friction with New York if you install the extension. And for it with DigiKey, if you install the extension. And in New York and Farnel, the way the extension works, it adds all the references, line notes to your shopping cart so that when you get the parts, you will normally have in the printer details there, what parts are what already. So the idea really is to have a KIP transfer without the creator necessarily having put together a KIP. They can transfer all the information you need to buy your own KIP without them having to bag components and things. That's really the big idea. Should we try and buy something? So this won't actually use the extension. So this prompts you, like I said, do you want to buy more parts for less money? Yes, I would like to buy. All right, here we go. There's all the parts you need, and you can go and buy that. So what I added a few days ago, here we are. I'm a bit confused, sorry, we are more. So this is what I added a few days ago, because previously, the way we handled submissions was you sent a poll request to the GitHub repo where the site is, where all the site source code is, and there's a Boards.txt file where you add the line to your publicly accessible repository. And then if everything looks OK, then I'll add that to the main branch, the master branch, and the whole site is rebuilt with your project in it. So now, I added this a few days ago, and you can try and instead of just blindly going, does this work? You can now get a better idea by doing a preview. So this is the kind of Arduino example project, and it renders the thing for you, and you can change the color. But there's still no accounts on the site or anything, so you still have to go by the end of all of this. If you've checked everything, it seems to be in the right place, and there's the readme file, and the links and things, then by the end of it, please send us a poll request. So there's still a lot of work to do there. I think single URL, given that you can construct the URL, which will be based on it. Yeah, that'll work, maybe. I've never seen that anyway, so I'm not sure. Right, I'm not sure how to get back to my presentation, though. All right. I don't think my key went. OK. Right. Oh, this is my. OK. So yeah, like I said, the idea is really this virtual kit. You don't have to lift a finger. You can transfer all the information you need through this, through the website. The way it works, oh, right. The way it works, we use static site hosting for the moment, minute. We use continuous integration to build the site and to kind of preview. You've seen me messing about with these preview domains. That's actually a branch on there. So whenever I make a branch and I push it up to get up, it'll build, it'll deploy it to my AWS server so I can have a look at the site then, and I can show other people what's going on there. And I already went over this. So there's a lot of plan features. Really, it would be nice to add accounts and have a management feature and have file uploads, not necessarily force electronic engineers to use it. And really, I quite enjoy making tools that help make builds and materials. I'm going to skip over this because I'm running out of time. This would be a nice feature if you could like to help you build the kit. If you hover over somewhere, you can see where on the board it was. This is kind of philosophy that I take when implementing this is like to build the minimum thing that could be useful and then to add on top of that instead of trying to build the whole thing at once. Yeah, that's a good question. Like I said, there's already cause requests. There's some pros and cons. You can read up on that. That's supposed to be a nice thing. I guess the question for me as well is how do I make this development sustainable? Really, so far there's a lot of expenses and there's some potential to track referrals in the site and try and make money of that and to support development or the potential to add paid private accounts and have people pay a subscription to support or maybe some other donation mechanism to support the development. Right, some code. I don't think I have a lot of time for the code. Are there any questions at this point? Yeah? Yes. It would be possible, very much so. I'm going to continue. Sorry, I shouldn't have. It's all JavaScript. Everything's JavaScript. I'm going to come back to questions afterwards. Initially, if you look at the old presentation, it was CoffeeScript and I've stopped using that to get advanced features, JavaScript features because CoffeeScript was kind of getting in the way. We still compile JavaScript to JavaScript. Brilliant. So, the Kipney site uses React as the front end. It's kind of this view layer made by Facebook where you define lots of different small modules. You're pretty much writing HTML. You're getting JavaScript to always generate HTML for you instead of getting JavaScript to manipulate HTML for you. So, it does one pass and it renders it and that's your static site and then it uses this React front end to modify that. I started building out microservices and making use of microservices. So, the preview thing, I made a project out of that. It's kind of a little service where you can put in a URL for a Git repository and it will serve all the files to you. So, I think I want to continue to split out little projects like this that could be generally useful on OpenSystem. This is not my thing. I make use of this for geolocation but that's another service that's running to support Kipney. I had a lot of things to say about JavaScript which I probably won't have time for but pretty much the gist of it is that there's a lot of bad things to say about JavaScript but the ecosystem is pretty amazing right now. People make little tiny packages for everything so there's even a package to left-pad a string. That's one JavaScript package that you can include in your repository and there was a bit of controversy around this because the person that was in charge of this removed this from the repositories and it broke a lot of important projects. So, there's upsides and downsides to this. This is an amazing library that we make use of a technique written by Michael Cousins and it renders Gebo files using JavaScript. It will work in the browser. It will work on Node.js in the backend and those are kind of the dependencies that it has but Michael Cousins has written all of this and one kind of neat thing that we've done well we've collaborated on is what's that Gebo which kind of takes all these different ways of naming Gebo files and tries to figure out what the stack up is and make the right rendering. More code that I'd plan to show you. Well, I made use of NPM packages to make this feature which I will skip ahead to and it's kind of combined with the CPL data from Octopart. So, it is a quick lookup from your description. Yeah, I should probably... So, you kind of give it a description, place that in there and press complete and it figures out what parts you wanted just from the description. And this is especially good for kind of generic components. Oh, these are not actual windows, right? And you can put that back into your spreadsheet or go and buy that with the extension. So, I'd like to work more on things like that to make making builds of materials easier. Right now, this is a bit like a self-driving car with just one button. You've got no control, you can just say complete and then you have to check over all the mess that it could potentially make. So, how am I on time? Three minutes ago, I should have finished, including questions. So, I'm done, right? Well, I'm a clapper for myself. Any questions? Yes. Yes, there's... I mean, not like concrete plans but that seems like a great feature to have. So, the question was, why not generate work files, sorry? Yeah. Yeah. Because they vary so much across retailers. So, what I'd like is to have the same way to do it across all the different retailers and always the same steps. Yeah. Is the file that you generate with a deeper office also compatible if I use, for instance, open office or another...? Yeah, it's actually the clip-out format and it's just tab-separated values so it'll work with any spreadsheet. Multiple? Yeah, multiple vendors are currently not supported in the format. The only thing that is supported is multiple manufacturer part numbers on the bill of materials so you can say that all these parts are possible to be used here and then you have a selection for specific grades here. Well, you have different manufacturers. You actually want a capacitor that fits the circuit specification. Yeah. Yeah, exactly that. So, you can have multiple manufacturer part number, manufacturer part number and then you could have a selection of one of those for your retailer columns. They are not atomic, no. You pretty much... I've only tested this doing one retailer at a time and the website won't currently let you do more try and add more components while the other components are already being added but you can have quite large bills of materials so you can all add it once. Well, it would be quicker if you did it as one request. Yeah, that's the trouble trying to validate and making sure that it's correct.