Kitnic.it and 1-click BOM
Emanuel, Kaspar
1-click BOM is a browser extension that lets you easily buy required partsgiven a bill of materials. This was first presented at FOSDEM in 2015 and inthis talk Kaspar catches us up on the progress since. One of the most exciting bits to come out of this development is the projectsharing site Kitnic.it: a registry for open source hardware that makescomplete PCB designs easier to replicate. The story of the development of these applications is a tour of the pains andjoys of developing electronic design tools for the web with Javascript.
 So, if you were here previously, you know my name is Kasper 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. 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 can look at these statistics here and kind of guesstimate the amounts of people there in the world working on electronic engineering versus software. And so, kind of in summary, there's about one EE to every three programmers maybe and then I was, 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, where 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 iterate, 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 KiteCat projects on GitHub, about 7,000 Eagle projects and OSHPAC 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 then 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 Pease, 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 KiteCat and all the different ways of sharing things and all the ways of making PCBs and kind of mung it all up and at the end of it, what are you really doing really? 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 one click 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 one click one browser extension that was first presented, I first did it actually 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, Mauser, RS, New York, Farnel 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 you, 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, 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 ahead. So you can look up the slides and look at the comic, it's quite, it's cute. This is the kind of request you have to send for what is this, the Mauser site to add something to your cart and there's quite a lot of stuff in there and maybe you don't strictly need that 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 in 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 and all the different countries with 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 it can empty it and if there's a failure, if there's something fails it'll notice and also if, but it won't like, 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. 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 KITNICIT 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-separate values. You need a 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 gob as an exalon 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 here. Here we go. One second. So, that's the front page. And there's a wisdom scroll bar. I'm sure that's not the website for other scrolls on this. Nope, on page down will always be great. Here we go. Okay. So these are some projects that are on there already. We can maybe select one. So this is 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 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 calls 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 on 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 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 printed details there what parts are what already. So the idea really is to have a kit transfer without the creator necessarily having put together a kit. They can transfer all the information you need to buy your own kit 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 them. Here we go. There's all the parts you need and you can go and buy them. So what I added a few days ago. Here we are. I'm a bit confused. Sorry. Where am I? Right. What I added a few days ago is because previously the way we handled submissions was you sent a pull request to the GitHub repo where the site is, where all the site source code is and there's a board.txt file where you add the lines to your publicly accessible repository and then if everything looks okay 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? 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 pull request. So there's still a lot of work to do there. I think you can make a pull request with a single URL. Oh yeah, that'll work maybe. I've never seen that anyway so I'm not sure but right, I'm not sure how to get back to my presentation now. Oh crap. I don't think my key went. Oh this is my... 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 the website. The way it works, oh right. The way it works. We use static site hosting for the moment. We use continuous integration to build the site and to 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 GitHub, 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 Git. 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 is. This is kind of philosophy that I take when implementing this. Like to build the minimum thing that could be useful and 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 cores requests. There's some pros and cons you can read up on that. Oh, that's supposed to be a nice thing. Right. I guess the question for me as well is how do I make this development sustainable? Really there's a lot of, 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? Is it possible to have one click through to say yours, Mark? Yes, it would be possible. Very much so. I'm going to continue, sorry. 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 coffee scripts and I've stopped using that to get advanced features, JavaScript features because coffee script was kind of getting in the way. We still compile JavaScript to JavaScript. Brilliant. Yeah. So the Ketna AI 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 for, to support Ketnic. 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. You can make little tiny packages for everything. 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, it's written by Michael Cousins and it renders geobuffiles 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 geobuffile which kind of takes all these different ways of naming geobuffiles and tries to figure out what the stackup is and make the right rendering. Right small code that I 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, paste 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. 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 we were including questions. Three minutes ago I should have finished including questions. So I'm done, right. Why am I clapping for myself? Any questions? Yes, yes, there's, I mean, not like concrete plans but that seems like a great feature to have. Yeah. So the question was why not generate work files, sorry? 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. Yeah, yeah. Is the file that you generate with the office also compatible if you use for instance open office or another? Yeah, it's actually the clipboard format and it's just tab separate values so it'll work with any spreadsheet. What do you do when components have multiple alternatives? Multiple alternatives with different prices. Yeah, multiple vendor alternatives are currently not supported in the format. The only thing that is supported is multiple manufactured power numbers on the bill of materials. So you can say all these parts are possible to be used here and then you have a selection for specific grades. For example, the capacitor, you have different manufacturers, you actually want a capacitor that fits the certain specification. Yeah, exactly that. So you can have multiple manufacturer power number, manufacturer power number in your bill of materials and then you could have a selection of one of those for your retailer columns. The operation to do on the external websites or the atomic, so can you do like an entire batch of components in one go? Do you do it separately? They are not atomic, no. You pretty much, you, I've only tested this doing one retail at a time and the website will 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, if you have very complicated, because these are all simple examples, but imagine like very complicated work would take a while before you start shopping for the bills that you accept the request. Well, it would be quicker if you all did it, if you did it as one request. Yeah, it would be quicker if I did it. I don't know, I wouldn't be trusted if there's like an old bunch of requests going on. Yeah, that's the trouble, trying to validate and making sure that it's correct. Great, that's very good. Thank you.
 So, if you were here previously, you know my name is Kasper 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.  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 can look at these statistics here and kind of guesstimate the amounts of people  there in the world working on electronic engineering versus software.  And so, kind of in summary, there's about one EE to every three programmers maybe and  then I was, 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,  where 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 iterate, 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 KiteCat  projects on GitHub, about 7,000 Eagle projects and OSHPAC 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 then 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 Pease, 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 KiteCat and all the different ways of sharing things and all the ways of  making PCBs and kind of mung it all up and at the end of it, what are you really doing  really?  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  one click 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 one click one browser extension that was first presented, I first did it actually  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, Mauser, RS, New York, Farnel 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 you, 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, 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 ahead.  So you can look up the slides and look at the comic, it's quite, it's cute.  This is the kind of request you have to send for what is this, the Mauser site to add something  to your cart and there's quite a lot of stuff in there and maybe you don't strictly need  that 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 in 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 and all the different countries with  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 it can empty it and if there's a failure, if there's something  fails it'll notice and also if, but it won't like, 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.  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 KITNICIT 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-separate values.  You need a 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 gob as an exalon 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 here.  Here we go.  One second.  So, that's the front page.  And there's a wisdom scroll bar.  I'm sure that's not the website for other scrolls on this.  Nope, on page down will always be great.  Here we go.  Okay.  So these are some projects that are on there already.  We can maybe select one.  So this is 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 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 calls 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 on 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 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 printed  details there what parts are what already.  So the idea really is to have a kit transfer without the creator necessarily having put  together a kit.  They can transfer all the information you need to buy your own kit 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 them.  Here we go.  There's all the parts you need and you can go and buy them.  So what I added a few days ago.  Here we are.  I'm a bit confused.  Sorry.  Where am I?  Right.  What I added a few days ago is because previously the way we handled submissions was you sent  a pull request to the GitHub repo where the site is, where all the site source code is  and there's a board.txt file where you add the lines to your publicly accessible repository  and then if everything looks okay 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?  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 pull request.  So there's still a lot of work to do there.  I think you can make a pull request with a single URL.  Oh yeah, that'll work maybe.  I've never seen that anyway so I'm not sure but right, I'm not sure how to get back to  my presentation now.  Oh crap.  I don't think my key went.  Oh this is my...  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 the website.  The way it works, oh right.  The way it works.  We use static site hosting for the moment.  We use continuous integration to build the site and to 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 GitHub, 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 Git.  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 is.  This is kind of philosophy that I take when implementing this.  Like to build the minimum thing that could be useful and 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 cores requests.  There's some pros and cons you can read up on that.  Oh, that's supposed to be a nice thing.  Right.  I guess the question for me as well is how do I make this development sustainable?  Really there's a lot of, 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?  Is it possible to have one click through to say yours, Mark?  Yes, it would be possible.  Very much so.  I'm going to continue, sorry.  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 coffee scripts and I've stopped using  that to get advanced features, JavaScript features because coffee script was kind of getting  in the way.  We still compile JavaScript to JavaScript.  Brilliant.  Yeah.  So the Ketna AI 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 for, to support Ketnic.  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.  You can make little tiny packages for everything.  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, it's written by Michael Cousins and it renders  geobuffiles 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  geobuffile which kind of takes all these different ways of naming geobuffiles and tries to figure  out what the stackup is and make the right rendering.  Right small code that I 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, paste 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.  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 we were including questions.  Three minutes ago I should have finished including questions.  So I'm done, right.  Why am I clapping for myself?  Any questions?  Yes, yes, there's, I mean, not like concrete plans but that seems like a great feature  to have.  Yeah.  So the question was why not generate work files, sorry?  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.  Yeah, yeah.  Is the file that you generate with the office also compatible if you use for instance open  office or another?  Yeah, it's actually the clipboard format and it's just tab separate values so it'll work  with any spreadsheet.  What do you do when components have multiple alternatives?  Multiple alternatives with different prices.  Yeah, multiple vendor alternatives are currently not supported in the format.  The only thing that is supported is multiple manufactured power numbers on the bill of  materials.  So you can say all these parts are possible to be used here and then you have a selection  for specific grades.  For example, the capacitor, you have different manufacturers, you actually want a capacitor  that fits the certain specification.  Yeah, exactly that.  So you can have multiple manufacturer power number, manufacturer power number in your bill  of materials and then you could have a selection of one of those for your retailer columns.  The operation to do on the external websites or the atomic, so can you do like an entire  batch of components in one go?  Do you do it separately?  They are not atomic, no.  You pretty much, you, I've only tested this doing one retail at a time and the website  will 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, if you have very complicated, because these are all simple examples, but imagine  like very complicated work would take a while before you start shopping for the bills that  you accept the request.  Well, it would be quicker if you all did it, if you did it as one request.  Yeah, it would be quicker if I did it.  I don't know, I wouldn't be trusted if there's like an old bunch of requests going on.  Yeah, that's the trouble, trying to validate and making sure that it's correct.  Great, that's very good.  Thank you.
Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_0_71.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_72_131.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_132_707.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_708_5567.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_5568_6095.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_6096_9839.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_9840_11399.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_11400_13715.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_13716_13775.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_13776_13979.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_13980_14531.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_14532_14603.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_14604_14711.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_14712_15203.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_15204_18491.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_18492_18575.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_18576_18647.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_18648_19595.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_19596_20351.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_20352_20915.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_20916_21479.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_21480_21527.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_21528_21803.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_21804_23471.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_23472_23663.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_23664_30575.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_30576_31355.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_31356_32027.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_32028_32723.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_32724_33479.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_33480_37979.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_37980_38231.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_38232_38291.png Kitnic_it_and_1click_BOM_Making_webenabled_EDA_tools_using_Javascript_38292_38356.png
So, if you were here previously, you know my name is Kasper 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. 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 can look at these statistics here and kind of guesstimate the amounts of people there in the world working on electronic engineering versus software. And so, kind of in summary, there's about one EE to every three programmers maybe and then I was, 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, where 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 iterate, 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 KiteCat projects on GitHub, about 7,000 Eagle projects and OSHPAC 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 then 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 Pease, 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 KiteCat and all the different ways of sharing things and all the ways of making PCBs and kind of mung it all up and at the end of it, what are you really doing really? 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 one click 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 one click one browser extension that was first presented, I first did it actually 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, Mauser, RS, New York, Farnel 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 you, 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, 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 ahead. So you can look up the slides and look at the comic, it's quite, it's cute. This is the kind of request you have to send for what is this, the Mauser site to add something to your cart and there's quite a lot of stuff in there and maybe you don't strictly need that 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 in 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 and all the different countries with 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 it can empty it and if there's a failure, if there's something fails it'll notice and also if, but it won't like, 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. 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 KITNICIT 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-separate values. You need a 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 gob as an exalon 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 here. Here we go. One second. So, that's the front page. And there's a wisdom scroll bar. I'm sure that's not the website for other scrolls on this. Nope, on page down will always be great. Here we go. Okay. So these are some projects that are on there already. We can maybe select one. So this is 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 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 calls 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 on 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 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 printed details there what parts are what already. So the idea really is to have a kit transfer without the creator necessarily having put together a kit. They can transfer all the information you need to buy your own kit 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 them. Here we go. There's all the parts you need and you can go and buy them. So what I added a few days ago. Here we are. I'm a bit confused. Sorry. Where am I? Right. What I added a few days ago is because previously the way we handled submissions was you sent a pull request to the GitHub repo where the site is, where all the site source code is and there's a board.txt file where you add the lines to your publicly accessible repository and then if everything looks okay 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? 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 pull request. So there's still a lot of work to do there. I think you can make a pull request with a single URL. Oh yeah, that'll work maybe. I've never seen that anyway so I'm not sure but right, I'm not sure how to get back to my presentation now. Oh crap. I don't think my key went. Oh this is my... 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 the website. The way it works, oh right. The way it works. We use static site hosting for the moment. We use continuous integration to build the site and to 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 GitHub, 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 Git. 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 is. This is kind of philosophy that I take when implementing this. Like to build the minimum thing that could be useful and 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 cores requests. There's some pros and cons you can read up on that. Oh, that's supposed to be a nice thing. Right. I guess the question for me as well is how do I make this development sustainable? Really there's a lot of, 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? Is it possible to have one click through to say yours, Mark? Yes, it would be possible. Very much so. I'm going to continue, sorry. 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 coffee scripts and I've stopped using that to get advanced features, JavaScript features because coffee script was kind of getting in the way. We still compile JavaScript to JavaScript. Brilliant. Yeah. So the Ketna AI 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 for, to support Ketnic. 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. You can make little tiny packages for everything. 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, it's written by Michael Cousins and it renders geobuffiles 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 geobuffile which kind of takes all these different ways of naming geobuffiles and tries to figure out what the stackup is and make the right rendering. Right small code that I 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, paste 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. 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 we were including questions. Three minutes ago I should have finished including questions. So I'm done, right. Why am I clapping for myself? Any questions? Yes, yes, there's, I mean, not like concrete plans but that seems like a great feature to have. Yeah. So the question was why not generate work files, sorry? 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. Yeah, yeah. Is the file that you generate with the office also compatible if you use for instance open office or another? Yeah, it's actually the clipboard format and it's just tab separate values so it'll work with any spreadsheet. What do you do when components have multiple alternatives? Multiple alternatives with different prices. Yeah, multiple vendor alternatives are currently not supported in the format. The only thing that is supported is multiple manufactured power numbers on the bill of materials. So you can say all these parts are possible to be used here and then you have a selection for specific grades. For example, the capacitor, you have different manufacturers, you actually want a capacitor that fits the certain specification. Yeah, exactly that. So you can have multiple manufacturer power number, manufacturer power number in your bill of materials and then you could have a selection of one of those for your retailer columns. The operation to do on the external websites or the atomic, so can you do like an entire batch of components in one go? Do you do it separately? They are not atomic, no. You pretty much, you, I've only tested this doing one retail at a time and the website will 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, if you have very complicated, because these are all simple examples, but imagine like very complicated work would take a while before you start shopping for the bills that you accept the request. Well, it would be quicker if you all did it, if you did it as one request. Yeah, it would be quicker if I did it. I don't know, I wouldn't be trusted if there's like an old bunch of requests going on. Yeah, that's the trouble, trying to validate and making sure that it's correct. Great, that's very good. Thank you.
is Kasper and I'm an electronic design engineer and software developer. This talk is about a web working on, which is to make it easier to which works in your browser to replicate web one browser extension that was first presented, I first did it actually in 2015 and it's still the extension and copy out of the extension back bomb so if you share a bill of materials on There'll be more on that later. It's open source, static site hosting for the moment. We use make this development sustainable? Really there's JavaScript. I'm going to come back to questions