 I got into web development because of CSS. How many of you were playing with WordPress trying to mark up the themes? That's exactly how I got into CSS. Nothing serious, but about five years ago, I decided, OK, I'm going to become a web developer like with full seriousness. So my talk is a lot about my journey into the web development community and a little side project which I believe will benefit all of us as developers, as CSS developers. And because the site that I created is about data about Singapore developer community, it uses SVG and CSS. So you'll be using the site a little bit in responsive. Charts and graphs are plotted in CSS and SVG. And maybe you can also give me feedback. So let me start. So who am I? My name is Sayani. And if you want to find me online, you can just go to this website with a top-level domain of dot ee. Thanks, Trestonia. Yeah, that is my name. And that is my domain. All right, so this is where you can find. As you can see, this is one of my project, WeBuild.sg. So this is the website. Once again, if you go to WeBuild.sg right now on your mobile phone, you see a very simple page like this on the right. On the left-hand side is open events, starting with talk CSS, which is chronologically like upcoming ones. And on the right-hand side, you'll see GitHub. But how did it all get started? Almost three years ago, on 20 December 2012, these things happened when developers had some holidays. Then kind of like, OK, man, I have time now. So about three years ago, I was like, where are the developers in Singapore? It definitely did not have as vibrancy, as Silicon Valley, or Tel Aviv, or Bangalore. And so I was like, OK, so why don't I just create an HTML page? Because that's only what I knew at that time. And just start listing down. And it was possible, because every month, there would be about 10 or less developer events. So I did the first comment, which was completely in HTML. And it was going on well. Until somebody, so let me explain a little bit. I forgot to explain. Until somebody was like, are there archives or data stored? So the thing is, I previously did it with static page. But over the years, even though the design is exactly the same, the back end has changed. So let me explain to you a little bit. So every hour, a cron job runs, or a scheduler runs. And it queries the API of Facebook events, meetup.com events, event-brite events, and even ICS URL, if you really don't want to host your event on any platform. And it queries all of them. And it lists them down chronologically in the upcoming order. And it does the same with GitHub. So if you have a repository with more than 50 stars and your location contains Singapore. So even if you shuttle between and you're a nomadic developer, don't worry. Just put Singapore as one of the cities in the location string. Then your repository will come up here if you have updated it within the last three months. As you can see, updated 28 minutes ago, 32 minutes ago, 32 minutes. And this happens every hour. And this was really good. But we never really stored the data. Because I mean, seriously, why do we need to store anything? Everything was in memory. We only care about the upcoming events and the recently updated repositories. Until this friend, MathGeekV, was like, I want to do some math. Can I have the past events? Then we were like, uh-oh, we don't have it. And so the next thing that we did, and that's how the idea of data.rebuild was born. So let me explain a little bit. This is how the site looks like. If you go to data.rebuild.sg, maybe I should just exit. Data.rebuild.sg right now, you will see about 8, 9, 10, 8, 11, 12. Is that 11? 8 plus 3 is 11. 11 graphs and a few statistics here. So as CSS, I think developers, we are very much concerned about the design as well. I do back end as well. A little bit of DevOps, pretty much full stack. But I think I'm a good copycat or I don't know. I think copycat is inspiration, right? So the first site I went and looked at was data.gov.sg. And I found that they kind of did this little thing, you know, like icons and a little bit of heading. And then the next one that I went and researched was data.gov. And it also had the similar thing, right? An icon. And if you notice, I exactly copied data.gov with the circle thing. Because if you hover over here, it's also circle. Shh, don't tell people. Are you recording? So yes, I got the idea from data.gov, the US data site, that when I hover over it will be a circle. But mine is color, so it's different, right? So this is how I got the idea. And of course, I will also have a search bar. By the way, this search is also powered by CSS. We're using JavaScript. It invokes the data attributes inside HTML. So this is how I did it. So that was a little bit of inspiration. But I also want to talk about where I got the icons from. How many of you use the IComoon for SVG icons? What are your other sources? I think there are a few, right? The NAM project. Yeah, the NAM project, yeah. Phone awesome. Phone awesome, yeah, exactly. So I went to IComoon, and I downloaded the SVG version. But thanks to, by the way, you should tell about the Gitter channel we have about Singapore CSS. Sorry. Yeah, so I went there, and I was like, OK, guys, what can I do with SVG? So in fact, Chiya recommended me this site called Jake Archibald, who is a Googler for performance. So if you paste your SVG markup here, you will get a lot of options. So I don't know. If you go to, say, Fontpacks, Learn More. Go to the app. Sorry? You have to go to the app. Oh, I need to go to the app. Yeah, see, I forgot. Yeah, just choose one of them. So if I go to, say, this house, and then I just generate SVG, right? And then can I just download it? Yeah, I can, of course. Get the code. OK, there you go. Is this the SVG code? Yeah. So if I go and paste it here, paste markup, no. It's not SVG. Paste markup here. Do you copy the use tag, not the SVG? Really? The symbol definition. I think you need the symbol definition. Second one. Oh, the second one. OK, see, that's why I need you all to help me. All right. All right. Yeah, I know, right? Nothing always works. So how do I download this? Download, OK, download, download, all right? And then open SVG. Come on, go to desktop. And what, where did I download this? Oh, yes. I need to unzip it. So what do people do when they have Illustrator? No, I don't know how to use Illustrator. So these are the hacks. So if you don't know how to use Illustrator, you can do the same thing as me. Desktop, icon, moon, and come on, yes. All right, yeah, all right. So you can see that there's 146 bytes. Because I wanted everybody to open it up in mobile as well. So I basically went and did everything. So you can see the code here as well. And it's pretty cool, because you will see how many percentage you're saving. So I was like, yeah, round up everything and blah, blah, just remove the heck out of everything. Just clean, just clean. The image is still OK. And then I downloaded it. So I used SVG markup here. And these icons are all SVG. If you inspect element here, these are all the, yeah, there you go, pretty clean, right? Wow, very clean. OK, so the next thing is, so how did I basically store the data? So what we do is every day, I actually take a snapshot of the events and then another snapshot of the repositories. And a bot, which is another GitHub user, kind of pushes it in JSON format here. So as you can see, it's all, by the way, happening automatically at 3AM when all of us are sleeping. So throughout the course of 2015, this bot was just chucking away data. And once again, during Christmas, when I had a bit of time, it all happens around Christmas and Chinese New Year. When I had a bit of time, I decided to do some data processing. But before that, let me show you how the JSON files look like. This is about the repositories look like. So as you can see, this is a repository node. And the repositories will capture certain information about it, like who is the owner, the number of stars, contributors, forks. And similarly, the events as well. It will be, why don't we look at Toxies? There you go, latitude, longitude, location, RSVP count, URL, group ID, group URL, start time format. So these are some of the things that they will collect. And are you interested to see the graphs now? Yeah, graph it. Graph it. All right, so in it, the graphs, you will see a very young developer community. But you will definitely see a growing trend. I think my point of coming here and speaking to all of you, in fact, I've been going to all, as much as developer meetups as possible, is to ask all of you to join in this growing story. Because we are all new, we are all learning, there is nothing to hide, everybody can come in and join in. And it's all open and free. I know people like Chris Weaching and a lot of organizers, are totally open to be co-organizers or open new meetups. So this is the first graph that I want to show you. You can, by the way, open this up on your mobile phone as well, because I do want to talk about responsive. Because, you know, data side is responsive. So this is after processing like over 600 JSON file. This is what the repositories look like. By the way, I charted this graph using D3JS. How many of you have used D3JS? All right, some of you. And this is SVG graph. So that's why it's a little bit interactive, it's completely. And I think from the trend you can totally see, like last year around January, it was barely single digit number of repositories above 50 stars updated per week. And if you come here, it's well beyond 40. I don't know what the graph will look like at the end of December. I think it will really, really go up. Maybe all of you can also contribute in. So the other interesting graph that we can look at is events per week. This is pretty interesting. It's fairly consistent, but you can see that, yeah, it's probably growing a little bit, but that definitely dips around the holidays, right? You can see that the repository graph, no, there is no dip at all. Like the coders are still sitting at home and coding away, but the events have slight dip. And of course, a couple of weeks ago, it was the Chinese New Year. So let me show you another graph. So by the way, these two graphs are made of SVG using D3JS. And if you open it up in your mobile phone, you will also see the graph. But maybe some of you can give me advice on this. Do you think, how do you think I made it responsive? Without looking at inspect. This is actually an image. Maybe if some of you have better ideas come and tell me. So I basically hid the SVG element when it's beyond a certain width in pixels using media queries. And then I inserted an image. The problem with this is, this has to be manually generated. You know, I'd actually take a screenshot like shift command four, take a screenshot and then put it inside. I'm sure D3 can probably generate it. I haven't gotten the chance to it. So you're all welcome to give me ideas on this. The next one is update activities by programming language. And this is where I will touch CSS. So where is CSS? CSS is right here, but in all honesty, let me tell you, a lot of the other projects also might use HTML and CSS. So not to worry. These are probably pure CSS or rather highest amount of CSS in their project. So yeah, I mean, join in and let's make this number go higher. And what this, by the way, is also done in D3.js but it is not an image which I'm very happy about because I do not have to manually generate it. This is actually using CSS. So it's basically a fixed percentage width and using D3 I did it. And I'm pretty happy with the result because it scales well and on mobile also you can see it. So let me know if in the mobile it doesn't look good because I do want to make it look good. So yeah, that's CSS. At this point of time, I really want to give out some chocolates, especially to the CSS Meetup user group because I think this is their third one. This is a new Meetup group. And at the end of this year, they will be like kind of pivoting the entire community to contribute to this. So one for Chris. Thank you, Chris, for starting this. Yay, and one for Huiching. Thank you for starting this. So if you wanna join them, I think you can, right? All right, so that's for CSS. Next, I wanna touch on active user groups more than five events. So how many of you are here in a Developer Meetup for the first time in Singapore? First time? This is your first time. Oh, cool, you have been to other Developer Meetups. That's awesome. So I wanna show you these other Developer Meetups. Did you ever knew that they existed? By the way, three years ago, this was impossible. And I'm only showing you a list of active user groups that have held more than five events in the past 52 weeks. So these are not stale groups. No, you're a new one, guys. You're a new, this is your third one. So this is your third event. So... Come back, but we've got some friends. Exactly, come back. And maybe Singapore CSS will be there in three or four months, all right? So go ahead and explore other Meetup groups as well. Click them and it will bring you to their Meetup page. The next one is repositories by Programming Language. And here you can also go and click a lot of them. And here, of course, I would want to click CSS. So there are three of them, which are more than 50 stars. And they have been updated in the last three months. And Mappy Breakpoints by Zell. Are you here, Zell? Yay, Zell is here. What chocolate for you? Okay, let's see, let's see who's who's who's Hacker Wave? Chee-an! Rasha, for you. If you contribute and your request series has more than 50 stars or you're organized, you'll also get chocolate. So, you know, it's a good motivation, I think. No, I'm kidding. All right, one minute to go. So the other one is a popular location, which is geolocated. So do go and check out datad3.js. And finally, I want to show you these numbers right at the bottom. These were the numbers in 2015. And I'm kind of doing a countdown from zero for 2016. Obviously, you can see that we have a bit to catch up, but I think we will beat the numbers from last year, from the trend it shows. So, of course, I'm here to ask all of you to contribute to this number in either ways possible, either as a coder or an event organizer or anyway. Once again, everything is open source right here. If you go to rebuild.sg, you will also see the various sister sites here, which are all for developers. There's also notes, which I want to point out, two of them. One is organizing meetups by Huiching. You should read up if you want to create. And one is how I present by Chris. I think if you want to be a speaker and meetup, so you can... Read the other ones. Read the other ones, definitely. Read the other ones as well. So yeah, that's about it. I hope you will benefit from this project, from all the open data that we have, and subscribe to the calendar here right at the bottom and come for more meetups and do more open source projects. Thank you. Thanks, no.