 So, next we have Joe Francketti with Tweet My Wedding Address, so give her a round of applause. Thank you, everyone. Can you all hear me okay? Perfect. So, hey, thank you so much for the intro, Matt. My name is Joe, and I'm a developer advocate at Samsung Internet, which means that I get to do fun things like talk at EMF camp and make silly things like hedgehog curling, which you can see on the left there, and biscuit tinder, which is a very important app for rating your favorite biscuits. But I'm not here to talk about web stuff. I'm here to talk about a project idea that I had a couple of years ago. Now, I attended EMF camp, like I'm sure a few of you did two years ago, and I saw the giant inflatable bunny rabbit. And the rabbit had some LEDs in it, and it also had its own Twitter account that you could tweet a color to, and it would change its color. And I really loved this idea, sort of changing the way that we interact with tweets really resonated with me, the idea that when we tweet, we broadcast an idea that we hope that other people will observe and respond to and interact with. And the inflatable bunny kind of took this idea from the virtual world to the physical world, and it changes the way that we interact with the things that people are sending. And I wondered what it would be like to have a thing in our physical environment that our friends and our loved ones could change to let us know that they're thinking about us. No message, just a nice change of colors. You could delight or surprise someone from half the world away. A scenario kind of like that iconic scene from Sleeping Beauty kind of played in my head, where two people could be warring to change the color of the rabbit, and then I thought, what if those LEDs were wearable? What if they were in a dress? What if they were in my wedding dress? And my friends and everyone from around the world would be able to tweet and change the color of my wedding dress, and I'd know that they were thinking about me. And so this sort of plan started in my head to make a tweetable, light-up wedding dress. But my crest almost instantly hit a brick wall. I was really excited about the idea, but I had genuinely no idea where to start. Now, I studied electronic engineering at uni, so that means I should know all about this stuff, right? And I'm a web developer, so making my own API should be a walk in the park. And yet, I wasn't sure what tech to use. I spend a lot of time battling imposter syndrome, which is the idea that everyone around you knows more than you, that everyone knows everything, and that one day you're going to slip up and everyone's going to realize that you don't really belong. Anyone else feel like that? It happens a lot in techy environments. We're spending a lot of time with some, like, really incredible people, and we have a tendency to compare ourselves to them unfavorably. So I was afraid of asking for help. Not only that, but I also suffer from anxiety related to perfectionism, and I'm sure some of you have also felt as well. Have you ever been afraid of starting a project because you just can't decide what is the best tech to use or you're scared of, you know, moving in the wrong direction? Or have you started a project but never finished it because you couldn't get it exactly right and you were worried what people would think about it? So getting started was tough, and I wasn't even sure where to start. I was afraid to ask people for help directly. I knew I needed some lights. I needed a board that I could program. I needed to be able to interact with the Twitter API in some way, but just where to start. So I did what I always do when I'm procrastinating on starting a project. I went on Twitter, and you may have noticed that I'm a little bit addicted to Twitter, and I needed a starting point, or I'd just procrastinate forever. So I asked Twitter for advice on what tech they'd use when building such a project, and honestly, their advice was actually a little bit overwhelming. And I mean, overwhelming but also amazing. Like, thank you so much to everybody. I know there are actually some people in the audience here who helped me out, and that's super awesome of you all. So what did I learn? Well, firstly, there's a board called an Adafruit Feather Hazard, which measures about five centimeters by two centimeters, and it weighs six grams, so it's like teeny tiny, and it has Wi-Fi connectivity, and it's got a USB connector, so I'd be able to connect it to the internet with the Wi-Fi and connect it to power with the USB. It also takes a battery if you want to go that way, and it costs about 15 pounds, which was sort of well within budget. I also learned that Adafruit make these things called fluorineopixels, which are little individual programmable LEDs. They're lightweight and they're teeny tiny, and they've got these really nice interfaces for sewing, so you can use conductive thread with them. They also have some really amazing documentation to get you started with learning how to use them. They're also about a pound each, and I needed a pound in money, and I needed a hundred of them in the dress, and that was massively outside of my budget. So what did I end up buying? I bought the Hazard, and then I went on AliExpress, Amazon, and eBay, and found these Chinese knockoffs of the neopixels, which don't have the nice sewing points, but they are white, so that was good because it was going in a white dress, and they're about 25 quid for 100, which is a plus. The downsides are the solder points on the back, teeny tiny, so you're going to go blind when you're soldering 100 of them, and there's no sewing points, but I can't sew for Toffee anyway, so I was going to be glowing these things in. I mean, that's not been about the bush there. I also bought other things that I would need to connect them, so soldering iron and solder, and my initial plan had included conductive thread, but I'd learnt from the Twitter thread that conductive thread doesn't work very well when you're dancing with any movement, and if any of you were at my dance class on Friday, you know that I dance a lot, so that wasn't going to work, so I decided to solder them together using single core wire because it's nice and easy to solder. And then my plan was to make a circle skirt out of this white netting and glue the LEDs directly into the skirt with hot glue. So now I had all the gear, but still not really any idea of where to actually start on the software, so I had to lean on the community again to get some help. And I went to a hackathon, and not just any old hackathon, but one called Sex Tech Hack, which is a really awesome, friendly, inclusive, non-judgmental, beginner-welcoming hackathon, but there were some really lovely people who helped me sort of get started in the right direction with the board. Now, this isn't always the way with hackathons, and if you want to chat about, like, friendly and unfriendly hackathons, come and chat to me afterwards, I'm really interested in. But that's an aside, so where did I learn? First of all, you have to install the Arduino IDE, which you can get on that link. I will share these slides out later, so if you're building your own similar project, all these links are available for you. It's also got some really awesome example code, so you can start, you know, running things on your board instantly. Next, I installed the packages that I would need to make my board work with the ID, so that's the library for the feather itself and the library for the NeoPixels, and yep, the link's there again. Then I soldered together some LEDs because I wanted to test it with more than one LED. The LEDs have little diagrams on the back to show you, like, what direction they have to go in and what needs to connect to what, so you make sure that your power is connected to your power, your data is the data and your ground is the ground. And then you needed to connect the LEDs up to the board itself, so my five volt went into my USB because I'm powering my dress from a USB battery. The ground goes into the ground and then I was using pin four as my data out. And then from the Arduino IDE, there's a whole load of different test code that you can run. One of the things is an RGB strand test that makes your LEDs cycle through all the colors in the rainbow and it's a really great way to know whether you've connected it all up properly, and this is a video of that happening. So before we talk about, like, what I did next, we need to understand how RGB LEDs work. So remember in school when you were told that there were three primary colors, there was red, yellow, and blue, and when you mix them together, you got these colors, so red and blue make purple, red and yellow make orange, and when you mix them all together, you get this kind of sludgy brown color. That's what happens with paints. When you're mixing colors with light, it's slightly different. Our primary colors are now red, green, and blue, and when we mix them together, we get this mixture here. So red and blue make purple, great, we know that one. Green and red make yellow, okay, and all of the colors mixed together make white, sure. So why does this matter? Well, when we talk about using RGB LEDs in the dress, RGB stands for red, green, blue, and it's these three colors that the human eye sees combined to make a single color. So if we have a closer look at one of these LEDs, they look like this, and they each have their own little tiny LED inside them, and we can give each of these lights a value to tell it how much to be turned on. Those values are between 0 and 255, 0 being completely turned off and 255 being as bright as possible, and we can use any combination of numbers to make any color that we can think of. So let's look at an example. So if we had 255 in R, which is red, 0 in B and 0 in G, the LED would show as red. If we had 255, which is full on in red, nothing in blue and full on in green, red plus blue, but make a purple light. So that's really lovely for us as developers, we can do maths, we can work this out, but I wanted people to be able to tweet my dress with a color in the English language, because I don't expect everyone to be able to know that purple is 255, 0, 255. I want them to just be able to say, hey, Joe's dress, turn purple. So I needed a way to convert between these colors that the board understands and the colors that humans understand. So let's take a look at some colors that are available to us on the web. I wanted people to be able to tweet any HTML color that they wanted, and some of the HTML colors are named fairly sensibly. So we have red and we have green, we have blue and purple and orange, and then they get a little bit stranger, a little bit more whimsical, so we've got chocolate and tomato and cornflour and peach puff and medium spring green and all kinds of colors. So I wanted people to be able to tweet any color they wanted to the dress, and I would convert it into the relevant RGB value. So what did I need to do? Well, first of all, I needed a Twitter account that people would be able to tweet at. I needed to be able to get those sweets that they sent and pick the color out of it and convert it to an RGB value. I then needed to send that RGB value to my Arduino and then get my Arduino to send that out to my LEDs. So if you go to developer.twitter.com once you've set up your Twitter account, you can set up an app, which is what you need to be able to use the Twitter API. And it's just a form that you have to fill in. Twitter have changed their rules about who's allowed to use the Twitter API now, so they don't want you to make another Twitter clone. They want you to be doing something interesting with it, so there's this long form where you have to describe all the things that you're doing, and it takes a while, but eventually it will be accepted, and then you'll have an app, which means that you'll be given some consumer and secret keys, which is what you'll need to be able to actually interact with the Twitter API. So there are a few different ways of interacting with the Twitter API, and I wanted just to be able to get this done sort of quick and dirty. So I started off using PHP and OAuth, because I found this amazing video, which I've linked to here, which literally just took me through step by step. And this was brilliant. It worked really well. I was instantly able to get access to my mentions. I could process the text that was coming through from the mentions. I hosted it on the hosting that I already owned, and it was brilliant, and then suddenly it wasn't brilliant, and it stopped working, and my hosting company were like, huh, okay. And I was like, but what? So I'm not a sysadmin, I'm certainly not a backend developer, and I had no idea what had gone wrong here. PHP is not my language, so I decided to quit while I was ahead and start all over again. So I built a whole new way of interacting with the Twitter API using Node and the MPM Twitch package, which I highly recommend. It's a really nicely documented little package, which will get you using the Twitter API. You give it your keys, and it spits back Twitter mentions at you. With both of these methods, I was able to get the text of any tweet that mentioned at Joe's dress, which is the Twitter handle that is connected to here. Oh, nice. And my code is on that glitch link. If you want to see it, feel free to copy it, use it, change it, whatever you'd like to do. If you want to use the Twitter API, that is an easy way to get started. And so now I needed to get those color names and convert them to RGB values, and the way that I did that was by creating an array that just had a lookup for each of the values and their respective RGB. I got this from a website called htmlcolonames.com, so I literally just copied and pasted one to the other. And so what happens was when I got content from a tweet that said something like, show me chartreuse. I looked through that text and I checked through each element in the array. So the first thing I did was, does it contain Alice blue? No. Does it contain antiquite? No. Does it contain aqua? No. So on and so forth till we get to chartreuse. And it says yes, it does contain chartreuse. And chartreuse is 1272550. And I then took that number and posted that out. So that is what my code was doing, my API is doing. If you want to see my API, you can visit this URL here and you will see three numbers. And those three numbers are the RGB value of whoever last tweeted something exciting. So we've now got our RGB value, but it's still on the internet and the board doesn't know anything about it, so we need to somehow get that value from the internet to the board. And my experience with microcontrollers and coding was so close to zero that it may as well have been zero, but luckily Adafruit have some really awesome documentation and code examples. So I knew that I needed to connect the board to Wi-Fi. I knew that I needed to do a GET request on that URL that I posted earlier. And I knew that I needed to then, once I got those three numbers, send them to the LEDs. And so there's code that comes with the Arduino IDE. If you go into File and Examples, there's all kinds of examples in there. There's examples of how to connect to Wi-Fi. There's examples of how to send a GET request, and there's examples of how once you've got three values, you can send them to your LEDs. So all I did was copy and paste code that other people had written. If you want to see my code, it's there on that glitch link that I posted earlier again. The code for the Arduino is all there. So as with many projects, it wasn't as smooth sailing as all of that. Getting my API up and running and then breaking was just one of the problems that I had. There was a whole bunch of issues. So for example, the first time I attached the LEDs to the Arduino to get the data and then send it to the LEDs, every fourth LED was the wrong color. And I was like, what is going on? Turns out there's not only RGB LEDs, there's RGBW LEDs that actually process the data in a different way. So you have to make sure that you tell your board which ones you've connected. Not only that, but remember those knockoff Adafruit pixels that I bought. I was sending red to them and they were showing green and I was sending blue to them and they were showing red. It turned out they don't take RGB. They take BRG. That was a fun one to debug. Once I had, though, I had all my software written. I had my hardware connected up and tested. Now I had to put it all together. And I don't know if you've ever heard of the phrase measure twice cut once, but I'm much more of a measure nuns cut a thousand times kind of a person, which can be incredibly frustrating and wasting of time and materials, but that's just how I am. So the first mistake that I made was that I assumed that I knew how to make a circle skirt, which is one of those beautiful swing skirts where you fold your cloth into a quarter. You cut a nice quarter of a circle out of it, then you cut the middle out of it. When you unfold it, you have a circle skirt. I didn't quite measure my waist properly. I cut a giant hole out in the middle of it and then I had to sew darts into it, which I hate, I hate sewing. So that was my first mistake. The second mistake that I made was I got super excited once I cut this circle skirt and I glued all the LEDs in and I was like, yeah, it's going to be amazing, 100 LEDs in a dress. Guess who forgot to check which direction she was gluing the LEDs in. They were all facing in all kinds of random directions. Not only that, because I wanted them to look kind of random and not to equal. It then meant I had to measure wire for each distance between each LED. Not only that, I had to do it three times because there's three wires that need to connect each one and then you have to solder them. When you're trying to solder on something that's already stuck onto net, soldering irons go through net like a hot knife through butter or like a soldering iron through butter, you might say. So all in all, gluing, soldering, connecting it all up took about 12 hours of absolutely back-breaking work. Here's me halfway through. That's what the connections on the back of those LEDs looked like. They are so small. But I connected it up. I ran my RGB string test on it and it looked awesome and I was so happy and proud of myself. But guess what happened when I tested it out? It instantly broke. Like five of my solder points all snapped. Like the whole thing just stopped working. So then I had to resolder it all and then after a brilliant suggestion from Matt, hot glued the back of all the solder points to give them a little bit of extra strength. And then the next challenge was the sewing. I had to get that thing inside this dress. This is my wedding dress. And it has a lot of layers of tulle on the top and then a layer of satin underneath. And I wanted it to fit between the satin and all the netting, which meant sewing. I'm terrible at sewing so I did just a sort of tacking stitch and prey around the top. And also I had to cut a small slit into it so that my cable could fit through my dress. So there's an Arduino in here. The USB cable was going through. And then I was thinking, well, where am I going to put this USB battery? There's all the women in the room. So spanks are these incredibly elastic, very solid pants. And I was thinking I would put the USB battery inside the waistband of the pants, which meant I had to cut a tiny slit through the dress. If I was able to sew, I would have done a nice buttonhole stitch around that because I'm not, I just coated it in super glue and prayed for the best. And this is the only picture that I got of the dress working because, guess what? I got into the taxi on the way to the wedding and one of the solder points broke and that was it, dead. Nobody ever saw it. But you know what, it didn't really matter because I learned a load of stuff and I was actually super proud of what I made. And I was able to take it home and iterate on it and I was able to take what I'd learned to make it better. So when you embark on a new project, you're going to make a load of mistakes and you're going to do things that occasionally make people raise an eyebrow, like gluing all the LEDs to your skirt before you even thought about how you're going to connect them up and you're going to make mistakes. But it's fine because you're going to learn how to do it better and you're not going to get it exactly right the first time. I don't know if you've heard the phrase perfect is the enemy of great but perfection is impossible and it's a goal that's going to stop you from actually, you know, ever getting started because you're never going to achieve perfection. Just get started and you'll end up with something awesome. The thing that I've learned is to do things my own way. If you like to just get started, do it. If you like to plan everything to the last detail before you start, do that. Find the way that works the best for you and understand the way that you like to work and allow yourself to work that way. If I force myself to plan and measure everything to the last detail, I get bored, I stop, I procrastinate. Diving in head first just lets me get started even if I have to start like five times. The next thing I would like to say is don't be afraid to ask for help. It can feel really embarrassing sometimes reaching out or admitting that you don't know something but our community is full of really lovely people who are really glad to help and also really opinionated people who just like the sound of their own voice. But don't be afraid to reach out to people. The worst that they're going to do is tell you that they don't have time and the best thing that they'll do is get you started in the right direction or point you to someone else who can help you. The final thing is offer to help. If you're an expert, offer your help to others. Attend hackathons or work with beginners or attend coding clubs as a mentor. Answer questions on Twitter even can make such a giant difference to people's projects. And if you're not an expert then getting involved in other people's projects is a really great way to learn new stuff. Thank you for listening. So we have some time for maybe one or two questions if anyone's got any. Stick your hand up if you do. One over here. Are you wearing a second iteration? This is the third iteration. Okay, I would like to know what changed between versions. So the second version, I bought pre-soldered versions of those knockoff neopixels. So you can buy them and the three wires are already connected together. That sort of worked better but those connections still weren't very strong. The third ones that I bought are these, I don't know if you can see them from there, much larger bulbs and the connections on those are much stronger. Not only that, the lights are a lot brighter. So under this fabric and in a bright light they show up a lot better. These are all cheap knockoffs from China. Anyone else? Cool, then another round of applause for Joe Franchetti.