 All right. Thank you very much. My name is Brian Anderson. My company is called notion ovis.com or notion ovis Website is at notion ovis.com and I also have these Social media sites. I don't have an Instagram. So don't look it's It's said on Power on Okay, I'm good So Notion ovis is built out of the two Latin words Notio, which is the Latin word for thought and Novus is the Latin word for new So we're gonna see if we can drop some new thoughts on you here today And this is specifically a story about my life behind barcodes We'll start out with some frequently asked questions Is the topic of barcodes really as dry as it sounds? The answer is oh well think of it like day old white toast in the middle of the Mojave So yeah affirmative Will there will this presentation involve maths Yes, yes, it will what does barcodes have to do with WordPress? Well, if you think about it barcodes is about using computer technology to communicate information So you might very well think about barcodes as a 70 year old predecessor to WordPress and Finally, can I just slip out the back when no one is looking and I'm afraid sadly. No, there's going to be a quiz and there will be There will be consequences. I mean prizes there will be prizes So There we go All right, so I want to introduce a couple blokes to you One of them goes by the name of Bernard Silver The other one goes by the name of Norman Joseph Woodland and they had a conversation. I'm making up It went something like this. Hey NJ Yes, Bernard Why are we at the beach? I? Wanted to tell you something in Morse code Well, just draw it in the sand. I haven't got all day Very well. Here it is. It spells groceries But you've made it too tall Your dots are lines and your dashes are bark bars Well, I totally meant to do that By Jove, you've just invented the barcode And I know right now. Let's slip back to Drexel Institute of Technology Where we are graduate students and put a vinyl of 12th Street rag on the phonograph in the electrical engineering lab Because that song is popular now that it's 1948 so you may have noticed a little bit of Backloading of Trivial information you may find useful later Mr. Woodland and silver did in fact invent the barcode Their patent was granted on October 7th, 1952 shortly thereafter. It was purchased by Philco And then shortly after that RCA picked up the patent it expired back in 1969. You're gonna want to find 1969 is a An interesting date and I'll cover it again later on But this is what the original barcode looked like actually it wasn't a rectangle though the type that you see today when it was first invented it was invented as a circle because Mr. Woodland didn't really wasn't really confident that he could get scanners to position the rectangle correctly And so he made it into a circle so it didn't matter what your orientation was Also, they had this big contraption that they also Invented along with the barcode and it would take these barcodes and take pictures of them convert them into Almost audio signals and put them on film and that was how the barcode reader was supposed to work Not really well suited for grocery or supermarkets One thing about their invention that is true to this day is this part right here. These vertical Spikes are actually voltage signals and if you think of a barcode as these black and white black bars and white spaces every time the Infrared diode hits a black bar It kind of vanishes into that bar and doesn't reflect back into the barcode scanner And every time it hits a white space it actually reflects back and provides a high voltage signal So this is how the the computer reads a barcode is by going back and forth through these Bars and spaces and noting those high voltage signals All right, so now We get it we get a little dry This is going to start to be a little dry. We're going to talk about symbologies and really Symbology you might not have heard that word before but symbology is what we in the barcode industry refer to as The type of barcode so you'll hear this word again and again as I discuss barcodes And it really just means barcodes of different types So the first symbology that I want to talk to you about is code 39. This is a this is kind of an ancient barcode, but still in use today code 39 Was actually used by the automotive industry action group For their manufacturing logistics, and it was invented back in 1974 Now these first three barcodes. I'm going to show you our linear or one-dimensional barcodes 1d barcodes and the second three I'm going to show you our 2d or matrix barcodes. So this is another 1d barcode. This is the UPC barcode and You're going to want to know that because that's what you see on everything that has a Symbol on it like this. This is a UPC barcode and the first scan of a UPC barcode was actually on a package of Wrigley's Juicy fruit gum in Troy, Ohio, and it was scanned by a woman named Sharon of Troy and Not Helen of Troy, but Sharon of Troy Ohio and she scanned that and on the 26th of June in 1974 and if you think back on when the barcode patent expired Is back in 1969 so all those years without an actual application that was significant enough to Pay off the people who invested in that patent kind of makes you wonder if Patents are really all that useful And then finally this is the code 128 now. This is the barcode that Is more modern than the code 39 it replaces the code 39 in many cases It supports all ASCII characters so you can you can put anything Upper-lick case lower case and numbers symbols Anything that's low that's in the low ASCII range on from 0 to 127 And that makes it one of the most popular 1d barcode symbologies now. We're going to get into 2d barcode symbologies There's data matrix and Data matrix is popular because it's really good if you want to emboss a barcode on something or you want to drill a barcode into metal It's used quite a bit in very small tiny applications if you find like a computer chip that has barcode on it It's probably got one of these They're stackable you can put multiple barcodes together and it all scan as one barcode and They it was invented back in 1990 the next one is PDF 417 now you've seen these on boarding passes and You'll see one on the back of your driver's license It's got two big bars on the sides, and then it's got a bunch of little dots in between That's a PDF 417. It's super dense It was invented back in 1991 and it's very popular today in all kinds of applications And then finally we have the QR code now the QR code was invented by Denso wave for the Japanese Automotive manufacturers it was invented back in 1994 and it's very popular primarily because it's royalty-free and the web and social media and Smartphones have really picked up on this and so generally speaking if you look at a poster and it's got a barcode on it It'll have one of these QR codes right here Okay, the dreaded quiz part one At what university did silver and woodland work as graduate students in? 1948 yes Drexel very good all right the original concept of a working barcode was not rectangular, but Very good circular What's that? Sure her alright What is the word commonly used? Yeah? Symbolologies that's correct boy. These are going fast The first commercial use of a UPC symbol on a 10-pack of wriggly's fruit juicy fruit gum Took place at Marsh's supermarket in wet town. Yes Troy, Ohio, that's correct very good and finally What is this symbol called and where was it invented? Japanese yes, it's invented in Japan correct All right now you guys are gonna have to keep because I don't remember who all got them, so I'm not gonna let you Answer all the questions yourself, so All right Okay, this goes back to my barcode history. This is what I call my initial Embarceration So that's my boss and that's me if you can kind of figure that out Brian get in here. We have a problem What do you know about barcodes? Not much really. Why do you ask? Well, I want you to take a look at this two weeks So what do you ask me to take a look at was a letter that was sent to us from Caterpillar requiring all of the Caterpillar's Suppliers to provide barcode labels for their products because Caterpillar was modernizing their supply chain and they wanted to know Or they wanted us to Essentially put barcodes on our products and that letter came with a little one-page flyer advertisement from another local supplier of Caterpillar Who was offering their system that would take care of all this for us for a mere $9,000 and When I said two weeks My boss didn't believe me but in two weeks I can get our laser writer plus to print these barcodes and He said something like I'll hold you to that and but I was already out of the office by the time And this is what I built. Okay. This was the AI AG the automotive industry action groups barcode specification for all incoming goods to an automotive manufacturer and If you've got a post-script speaking laser printer, this is super easy But one thing you have to get out of the mindset of is a lot of people look at a barcode and they see lines and rectangles they see and they have to all be space just perfectly and To a lot of people that represents a very significant Programming challenges because they got to figure out all kinds of X and Y Coordinates and they've got a draw and then they got to fill areas and all that stuff But what I saw was pretty simple. This is a binary code Just like Morse code and if you build it like a binary code and then just scale Well the computer will do all the hard work for you So that's what I did. That's what I built and here I want to do a quick demonstration. We'll see if this works out Okay web browser Okay, and I want to do Okay, this is part of the problem and forgot my hyphen Yes. Okay. Now. How do I get this up there? I guess I have to good so a Brief intermission For me it was about a 20-year intermission, but For us here We're just going to take a couple of seconds and commemorate my career at Caterpillar would had which had pretty much no barcodes in it When I got out of Caterpillar, I decided to go back to my roots and build a barcode speaking application but post script was kind of Out of it not quite as much of an in thing as it was and JavaScript was all the rave. So I wrote a JavaScript application That just takes say Word camp Peoria and Let's make the height 5 and the width 25 We'll do this in my favorite code 128. Okay, this is what I saw when I was thinking about how do I Develop a barcode app is I understood that barcodes look a lot like Morse code if you scale them wrong and so if we replace these two if we Say the height is 25 and the width is only five Things to look a lot better Okay, and what this app does is it takes these inputs in JavaScript and It Generates little five Dot space images right next to each other. So what you see here in this little Blue selected area is just HTML image tags, which tells me That this will work in any browser It will work on mobile it will work on tablets. It will work in Netscape Navigator 1.0 actually so if you and That's kind of the way I like to build things is so that they don't break just because you've adopted Some new version of something So this is a little utility that I wrote it's on my github and I can pass out that little But this is just this will allow you to do a quick barcode, but that was neither here nor there all right now what's Next All right, so how this works is you've got two basic stages you need a symbology specific chunkinator is what I call it and what that does is it takes your string like word camp Peoria and Grinds it up and turns it into a set of ones and zeros Just for the symbology, so if I wanted to do code 128 I'd need to run it through one symbology Specific chunkinator if I wanted to do code 39 I'd have to run it through a different one a QR code same thing The ones and zeros are going to be different based on what symbology you're using But once you get the ones and zeros then from there on the code doesn't care what symbology It's it's printing it's going to move those ones and zeros into a generic render engine Which is going to create based every five Set of ones and zeros is going to create an image Tag that has base 64 You know one dot a space one dot white one dot Or whatever it is so these image tags basically there's 32 of them one for each five-bit combination Okay, and now for the moment. We have all been dreading the the code walk-throughs, okay all right, so this is just the Wordpress plug-in boilerplate stuff that you have to put at the beginning of any Wordpress plug-in. I've named this plug-in notion of us underscore barcode and that's from namespacing purposes There's no one else in the world can they can name their plug-in notion of us underscore anything and so the That's filled out. We all get that. It's just a bunch of boilerplate All right, this is that Generic that symbolically generic Junk okay see that image source data image base 64 those are those image tags Okay, they represent five ones and zeros basically and you can scale them any way you want But all this stuff is stuff that I spent probably two days on drawing little tiny five Ten I was actually ten by two pixel Graphics that represented all five are all 32 situations that you might run into and then I took those Ran them through paint ran them through gimp ran them back through paint and then saved them into their tiniest possible representation and all of that stuff is the This is just a bunch of symbol specific malarkey. Let's move on moving right along So this is the code that takes that that symbol non-specific malarkey and turns it into a Result string and that result string is what gets output to the browser Okay, so this is that blue area that you saw earlier This is the WordPress version of that so this is what actually gets out to the browser for display Now this is code specific. This only works for code 128 Okay, so this is a symbology specific. This is like that blue engine, right? So it knows that if you give it the ASCII character code for a capital M that it's supposed to find say this This line right here that says one one one zero zero one zero zero one one zero or One of these so when you give it an M. It comes back with that So it's the one that translates the text you enter into the ones and zeroes this big long string ones and zeros and This is this is it. This is all of the code you need to make a WordPress Plug-in. This is a short code plug-in for Notion of us barcode and your attributes that you can pass it are the string the height and the width and That will give you your Output so let's try that Do I get bravery points for working on my production website in in the middle of a presentation? You know normally to a typical audience you should consider this a compliment normally I Wouldn't do this but because I know Mark Du Bois is in the room very good All right, so let's make a new post. We'll call this barcode demo and we'll say Welcome to word camp Peoria 2018 And then we'll do a Left bracket no sheen novus underscore barcode And then we'll say Um Space str equals quote Welcome comma welcome exclamation point quote And I'll just go with the standard values for the height and width and we'll say this Publish Okay, and if I preview I don't know a previous preview and I just want to sh I Could have viewed post there it is and You see the brackets and the s to just exactly what we typed we see that because I forgot to activate the plug-in There it is. Hello Okay, now let's go back to my site and go back There it is. All right anybody got a Phone they can bring notion ovus calm up on and navigate to I mean, I've got one, huh? That's that's okay. Okay menu Vlog ready to see that Let's see Go to and go back to my post and welcome welcome that takes guts All right. Anyway, thank you very much. Um, well, let's get back to the presentation not quite over with All right that more quick demonstrations That was what I just did. Okay, the dreaded quiz part two How am I doing on time? Okay AI AG is an acronym for what industry action group? Excuse me Automotive that's correct. Brian's barcodes require how many processing steps Yes, too. That is absolutely correct What primary symbology is currently supported with the notion ovus barcode shortcode Yes Correct code 128 B. Thank you Brian's barcodes were implemented in what scripting language before being converted to PHP for WordPress. Yes JavaScript is correct. Yes All right now somebody's been raising their hand every time. I want to make sure I give it just to them On this last one That's what I forgot. I forgot the math. Yes What's that? Modulus what does the percent mathematical operator do in JavaScript and PHP? That's correct. So we have a developer in the room Excellent, I was going to point that out when I was going through that boarding that boring code walk through But I could see that most of the eyes and the room were closed So that's why I didn't and that's my life behind barcodes Yes, I am ready for questions. Yes, this is my final screen. Yeah, that's a styling issue I don't know what it is yet, but I'm gonna there's a part in the in the CSS I think that's doing that's rounding edges According to my theme or something like that and because it doesn't affect the actual scan ability of the barcode I'm letting it go for now But I'm gonna be on that pretty soon next week any other questions Pretty much what you're expecting Yeah Good question absolutely a good question. Well, sometimes you go to like event websites And they'll have barcodes printed on the badge and that makes it easier for the people at the at the receiving side, you know to scan your To scan your barcode and then know who you are as opposed to You know when you're going from booth to booth or something like that as opposed to You know getting your business card, etc. So there's there's some speed of Recognition that you can get from barcodes Sometimes people just want and this bark this little shortcode thing is just to be able to slap a barcode But sometimes people want to print out sheets of barcodes so they can peel them off of label stock and stick them on shelves and stuff like that and that's Kind of the next step in the evolution of this WordPress plugin And All the things that you So those 2d barcodes like qr code actually have enough space in them if you if you go big enough Rectangularly They have enough space in them to hold your your entire contact your CRD file or whatever That people use to actually exchange contact information So you can embed quite a bit of information in those rectangular barcodes in the shorter ones. They're they're better for unique identifiers when you're passing out identities like you know badges and things like that so Yes, Chris Right so Right, so if you print out like a schedule or or something like that or a ticket to an event then Not only can I scan the ticket to see if it's valid But I actually know who you are because I can put your IP address and a unique identifier for your session and things like that Into that barcode. So I know more about you That might not even be printed in on the page. Yeah Yeah, you need one of these things. They're about 200 bucks Sure, you can also use a cell phone a lot of cell phone There are a lot of cell phone apps that allow you to scan barcodes from Using your cell phone as a scanner as well. Yeah, I I Use that thing You have a case Yes, I can use the problem is that this is all done with divs and images and those Embedded images and so Even on like a web page or on a mobile app There's a possibility you can enter too much data in and once that wraps you're done Okay, because it's the barcode will no longer scan if it wraps so and QR codes are even more Finicky because you have to stick the divs right up on top of one another and if any one of them does any kind of shifting Then it won't scan. So there's There's a little more difficulty in building QR codes and PDF or 17s But eventually what I'd like to do is build a complete barcode utility library sort of a thing Yep, yep The thing I want to get away from is server side Calculations and stuff like that. I think Best to put a very small amount of code in the browser or at least on the server side and just spit the Spit those little image things back and forth. So Okay, well, thank you very much everybody for your attention