[00:00:00] SY: Okay, so we are all sold out of earlybird tickets to Codeland. But regular tickets are now available. They start at 99 bucks, and they get you talks, a workshop, great food, great people, all in New York City on July 22nd. Go to codelandconf.com for more info. Link is in your show notes.
[00:00:36] (Music) Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host, Saron, and today, we’re talking about offline-first.
[00:00:42] (Music) If you’re listening to this podcast, chances are you have internet. And as developers, it can be easy for us to take internet for granted, but a lot of people don’t have internet at home. And if they do, it’s really slow and kind of unusable. Sometimes it’s because it’s just too expensive. Other times it’s because the infrastructure just doesn’t exist where they live. It sparked this movement in tech and product development called, “Offline-First.”
[00:01:10] CB: I’m Carmen Bourlon. I am a Full-Stack Developer in Oklahoma City and the creator of MargieMap.
[00:01:16] SY: It’s a movement asking product creators like you to remember that not every user has fast internet or internet at all. It asks us developers to make it easier to use apps even when they’re offline, but what does that actually look like? How do we code for offline-first? Carmen answers all these questions and more after this.
[00:01:43] As you know, I’m a podcaster, and I love talking to people and hearing their stories, and I love it so much I actually host another podcast called Command Line Heroes. It’s produced by Red Hat. And in that show, I get to talk to tons of people doing incredible work in open source. But besides awesome interviews, it’s also got sound effects, background music, you know, creative audio stuff. So if you’re looking for some more awesome tech podcasts to fill your feed, check out Command Line Heroes. Go to redhat.com/commandlineheroes. Link is in your show notes.
[00:02:19] If you’ve got a personal project, a small business, or a big business with lots of data, Linode offers you secure hosting for all your infrastructure needs. They are a Linux Cloud Hosting provider where you can get a new server up and running in under a minute. Plans start at one gigabytes of RAM for just five bucks a month. And with the promo code CodeNewbie2019, you can get a $20 credit. So go to linode.com/codenewbie and give it a try. Also, they’re hiring. Check out their jobs at linode.com/careers. Links are in your show notes.
[00:02:54] If you’re listening to this, you’re already on your way to changing your life through code. At Flatiron School, you might end up with a job, a promotion or a better salary. But that’s just the start of changing your career, your life, and the world. On campus or online, you’ll join a community of learners that are empowered to change their future in the rapidly growing tech field. A bold change begins with a single step. To take yours, go to flatironschool.com/codenewbie. Link is in your show notes.
[00:03:29] DigitalOcean provides the easiest cloud platform to deploy, manage, and scale applications of any size. They remove infrastructure friction and provide predictability so you can spend more time building what you love. Try DigitalOcean for free by going to DO.co/codenewbie and get $100 in infrastructure credit. Link is in your show notes.
[00:03:52] So what is MargieMap?
[00:03:54] CB: MargieMap is a map. It’s a visualization of income in relation to public libraries. Internet access is really closely related to a person’s income and so I chose libraries because they are a place that someone can go and they can access the internet and lots of other really great resources for free.
[00:04:13] SY: Interesting. Internet access and income. So what would I see if I go on? Is it like MargieMap.com?
[00:04:19] CB: Yes, it is. It’s MargieMap.com. What you would see on MargieMap if you were to check it out, you could type in like your location or a zip code or any location and you would see a bunch of different colors. So some colors symbolize lower income and some colors symbolize a higher income and you would also see some orange spots and those display libraries. So for instance Oklahoma, where I am, you see in rural areas, there’s a whole lot less libraries than in urbanized areas and there is also some income differentiation as well.
[00:05:55] SY: Interesting. Okay. So this seems like a very, very specific type of project, type of web site to do, and also seems like something that required a lot of data and a lot of analysis. What made you decide to build MargieMap?
[00:05:09] CB: It was a lot of data. It’s all from the US Census. They put out a really fantastic survey every year, the American Community Survey. I decided to build the map because there is a lot of data out there showing that income is really relevant to whether or not you’re going to have internet access specifically if you’re low income.
[00:05:30] SY: Really?
[00:05:31] CB: Yeah. It’s kind of a bummer because if you are low income you really need that opportunity that the internet provides and yet you’re least likely to have the access. I knew from studies that I had seen that this was a problem and so I was just really interested in plotting it on a map and seeing if location had anything to do with it as well.
[00:05:52] SY: And did it? What did you find?
[00:05:54] CB: In Oklahoma, location does have something to do with it, specifically in those rural areas I had mentioned before. If you are in a rural area, you’re both more likely to have a lower income and you’re more likely to not have a library near you. If you are in a more urban area, it’s tougher to say because there is obviously like in any city there is pockets of lower income. From what I’ve seen, again specifically for Oklahoma because there are 50 states, so still really kind of analyzing the data. But for Oklahoma, yes, I have seen a correlation between income and location and library access.
[00:06:32] SY: So the idea of focusing on the library access is because if you don’t have internet at home then at least you can get it at the library. Is that right?
[00:06:40] CB: Exactly. The library is one of the few places you can go and just kind of be and you don’t have to really pay anything. You can use like a Starbucks or an iHopper.
[00:06:50] SY: That’s what I’m going to say. Yeah.
[00:06:52] CB: Yeah, exactly. You could use something like that, but there is this expectation of payment, there is also you can only be there for certain times. There’s a lot more going on to be at a Starbucks or a coffee shop than there is to just go to the library.
[00:07:09] SY: Yeah. So how many people are we talking? We talked about how rural areas are more affected. This is a bigger issue than bigger cities. But how many people does it really impact?
[00:07:22] CB: So it may surprise you. In rural areas, it’s about 25 percent of Americans who live in rural areas who don’t have internet access at home.
[00:07:29] SY: Oh, wow!
[00:07:30] CB: Yeah. It’s actually…
[00:07:32] SY: That’s actually a lot.
[00:07:33] CB: Yeah. It’s quite a few people.
[00:07:34] SY: That’s a lot of people. Yeah.
[00:07:35] CB: Yeah. Another aspect to this that I think gets missed a lot is the smartphone. So smartphone is pretty ubiquitous these days, right?
[00:07:44] SY: Right. Right.
[00:07:45] CB: Well, what you end up is even outside of rural areas, even in urban areas, you end up with individuals who they are completely reliant on their smartphone for internet access and they are called, “Smartphone Dependent.” And so smartphone dependent means that you don’t have internet access in your home or you don’t have some place nearby like a library where you could go and access the internet. It can also mean both. You’re kind of on an island at that point where you’re having to use your smartphone for everything and that is actually really steadily rising in the United States. Back in the 2015, it only affected about 12 percent of Americans, but the Pew Research Foundation just released a new study that showed it was up to 20 percent.
[00:08:28] SY: Wow! So this 25 five percent of people who don’t have internet at home, why don’t they have internet? Is it purely A, it’s too expensive? Is it that, you know, Time Warner doesn’t reach me, doesn’t cover my area? Why is it so many people?
[00:08:47] CB: So for rural areas, access is a huge thing in the sense of like fiber. Fiber is very expensive to lay. It’s usually like around $1,000 a foot.
[00:08:57] SY: Wow!
[00:08:58] CB: So it’s an incredibly expensive infrastructural problem. And so in a rural area, a lot of times you’re limited to maybe satellite internet, which is also incredibly expensive. So price and access, like literal infrastructure access is a huge problem for rural populations.
[00:09:16] SY: Yup. Yeah. That makes sense. So I went to… Where did I go? I went somewhere out of the country, you know, recently and we had, you know, a very slow internet or it didn’t really have great internet because our data and we’re thinking like, “I don’t know how I can go anywhere literally. How do I leave my hotel and get to my destination?”
[00:09:33] CB: It’s a huge thing.
[00:09:35] SY: Yeah.
[00:09:37] CB: It’s really infiltrated all of our lives, like everything we do is online. You look for a job, get directions, get recommendations for a restaurant, talk to your family.
[00:09:45] SY: Yeah.
[00:09:47] CB: It’s all online.
[00:09:48] SY: Yeah. It’s everything, like so much of my life is very much on the internet. So for folks who don’t have internet at home, I can see it impacting them many, many different ways, but do you have a sense of the biggest impact when you think about their career, their life, their potential? What is the biggest way that it has impacted them?
[00:10:11] CB: I really think that internet access is opportunity access. And so what I mean by that is if you want to find a job, you have to have access to the internet. If you want to train for a job, you have to have access to the internet. There is another Pew Research Study out there showing that in developing countries when they get the internet, their GDP it will increase because suddenly they have all these opportunities they didn’t have before, being able to move up in income and like change class like you start out and you have like a lower income, and so class mobility I think is what I’m trying to say. That increases when there is more internet access. And so genuinely internet access is opportunity access. We also see it a lot in the homework gap. If you’re not familiar with that, it’s the idea of…
[00:11:00] SY: What is that?
[00:11:02] CB: It’s the idea of students who don’t have internet access are not able to complete their homework. Because here in the States, everything has kind of gone online. Actually even where I live, there are several school districts that have gone to this completely online structure and I actually emailed them, one of the school districts and I said, “Hey, you know, there are a lot of people who don’t have internet at home who may not even have a computer at home. And, you know, where does that leave those students?” There’s a -- I hate quoting research studies to you, but there’s actually another one.
[00:11:34] SY: That’s great. Yeah.
[00:11:36] CB: From Pew that was saying that almost one in five students is part of the digital divide, which is the idea that, you know, they’re divided by having internet or not having internet. And so one in five students almost doesn’t have internet at home and so that puts them at a really severe disadvantage to be able to do something as simple as just completing their homework. So genuinely, internet access is opportunity access.
[00:12:02] SY: (Music) Coming up next, Carmen shares more about her developer journey and how she went from a journalist to being a developer. She also tells us how we can start implementing offline-first in our own code after this.
[00:12:18] We’ve talked about open source a bunch of times on this podcast, but frankly, open source is so big and complex and fascinating that it needs its own show, and it has one. It’s called Command Line Heroes. It’s produced by Red Hat and it’s hosted by me. That’s right. I’ve got another tech podcast talking to incredible people about all things open source. We talk about the history of open source, the introduction of DevOps and then DevSecOps, and we even do an interview with the CTO of NASA. And that’s just the beginning. We also dig into cloud and serverless and big data and all those important tech terms you’ve heard of, and we get to explore. If you’re looking for more tech stories to listen to, check it out at redhat.com/commandlineheroes. Link is in your show notes.
[00:13:09] DigitalOcean is the easiest way to deploy, manage, and scale your application. Everything about it was built with simplicity at the forefront: setting, deploying, even billing. Their support is amazing. They’ve got hundreds of detailed documents and tutorials. So if it’s your first time deploying an app, they’ve got great tools and community to make it nice and easy. Try DigitalOcean for free by going to DO.co/codenewbie and get $100 in infrastructure credit. Link is in your show notes.
[00:13:40] Ready to change your life? Well, Flatiron School designed a school just for you. Flatiron is a global school with immersive and online courses designed for passionate people like you. If you’re looking to excel in a new, rewarding career, you can start right now. Check out Flatiron School’s free 75-hour boot camp prep, where you can learn JavaScript, Ruby, and do some interview prep. Flatiron School has helped thousands of students from all backgrounds invest in themselves by learning online or in person. By the way, did you know that they’re now part of WeWork, which means they now offer classes at a growing number of WeWork locations around the world. So go to flatironschool.com/codenewbie to learn more. Link is in your show notes.
[00:14:30] Linode is giving you a chance to try their powerful servers built for all your infrastructure needs. They’ve got nine data centers worldwide with new data centers opening up this year in India and Canada. Getting started with a shiny new server takes less than one minute, so you can get up and running in no time. And you can get a $20 credit by using the promo code, CodeNewbie2019. Just go to linode.com/codenewbie for more info. Link is in your show notes.
[00:15:01] SY: (Music) Tales from the Command Line, it gives us a chance to dig into one particular part of the episode and hear a different perspective from a really experienced developer in the field, Scott McCarty.
[00:15:12] SM: (Music) Yeah. My name is Scott McCarty. I am a Principal Product Manager and I focus on containers, like all the technology within containers that enables Red Hat Enterprise Linux and OpenShift.
[00:15:25] SY: Let’s begin. So offline-first, is this something that throughout your 20 plus years of working in tech in doing sysadmin stuff, sales stuff, product stuff, is this something that you thought a lot about?
[00:15:40] SM: Well, it’s Interesting because offline-first is really a sub set of the greater CAP theorem problem, like CAP theorem is a theorem that basically says there are major failures that will happen, its consistency, like things will get out of consistency. So if you have data in two places, they’ll get out of consistency and availability and partitioning. And so like sometimes one will be available but not the other and that actually typically implies a partition. But partitioning is always going to happen, so like you’re always thinking about this problem even within data centers or between data centers. But I have to admit it blindsided me a little bit when I thought about this from the end user’s perspective, right? There are times where I’ve been involved with designing software where like we were going to download the maps into the app and things like that and then have them available offline or we were going to calculate the geo stuff, like, you know, do the math on the server and then download that to the app so that then they could use it, things like that. I mean, we do design things to basically handle partitioning, but I’d never thought of it in the way of like people that have consistent lack of access to internet. So I have to admit that’s interesting.
[00:16:49] SY: Okay. So tell me a little bit more about this partitioning business. How is that relating to offline?
[00:16:56] SM: So when you’re designing like any kind of data center technology, like you’re always designing, typically it’s the flow of data between different data centers. There is process of level communications, there is container level communications, which are essentially just fancy processes, then there are virtual machines, then there are physical machines, then there are racks of servers, and then there are data centers. And now when you get to data center level, you end up having a new problem. This is like connectivity could be broken between two data centers and they get complete separated from each other. And so that’s a disaster recovery problem typically, like often we want two data centers that have completely different connectivity and we always want to have the data backed up there so that then at some point if one of the data centers becomes partitioned from the internet, which is equivalent to the users not even being connected to the internet in a lot of ways, it’s the identical problem. And so then you have to design the entire system that will handle that, right? Like you got to design the clients to be able to cache the data locally and then send it once the other data center comes back online or, you know, et cetera, et cetera.
[00:17:57] SY: Interesting.
[00:17:58] SM: There’s all kinds of ways you can manage around it.
[00:18:00] SY: Okay. So what you’re saying is when you’re talking about offline from a sysadmin data center perspective, it’s basically kind of like one data center being offline. Is that sort of like a fair way to think about it?
[00:18:14] SM: Yeah, exactly. Like if a data center goes offline, the clients are all disconnected so it’s really the same problem, it’s just a different side of it.
[00:18:20] SY: Yeah, interesting. Okay. So this offline-first idea is kind of -- has always been there in this sysadmin world. So when you thought about it, when you heard about it from the users having connectivity issues versus a data center having, you know, potential connectivity issues, how did you feel? What did you think of that?
[00:18:43] SM: Well, my brain gravitated towards the technical aspects of it immediately, like there’s a common paradigm in any kind of clustering called split-brain scenario where if you have two things writing data, you know, in two different places and they become partitioned from each other and they can’t communicate, what do you do? So if you have bunch of users, say a thousand users, and they’re all disconnected, you have to design those apps so that then they can basically write that data to the local app or local whatever, whether it’s an app or a device or whatever, and then basically they have to be able to get back in sync when those thousands devices all comeback online and can connect. They got to be able to synchronize that data. So like that’s kind what went through my mind, I’m like, “Oh, this is basically split-brain problem, but we have to do it at scale.” And that’s kind of where my mind went. It’s interesting though because even with my anthropology background, I had not thought about the human side of this. You know, there is a human side to this problem. My immediate reaction is “I don’t know how to solve that problem. That’s an interesting one.” I know Google’s answer is, you know, and a lot of these big Facebook and Google are like doing these things where they’ll deliver like WiFi access points, you know, in Africa and things like that, trying to solve this by getting people online.
[00:19:53] I have to admit to an extent, I’m skeptical. Maybe my sci-fi brain thinks this will end up going further where like if you have seen The Expanse, there are all these people that live in the asteroid belt around our solar system and you’re like, “Those people are probably like totally disconnected, like down in caves or something.” So there’s always going to be this problem no matter what. I feel like that’s an interesting problem. That’s for sure. That’s definitely an interesting problem, be able to design for offline-first.
[00:20:20] SY: Yeah. And even the solution you mentioned is interesting because with the bringing WiFi to people, it’s solving the, “Okay, if you are not connected, well, we will make you be connected,” right? It’s increasing connectivity, that’s a solution, but the other side of that is if that’s not even an option, if that’s not on the table, what can we do as developers, as people in tech, as the builders of these products, what can we do to make sure that people can still get value from the things that we create? So now that you are aware of this problem and you’re thinking about it in this new way, I’m wondering, are there any lessons from the sysadmin world or any concepts or things that you have done on the data server side that might be applicable to this other application, this other context?
[00:21:10] SM: I think every person needs to be a balance of pragmatic and optimistic. You know, like you have to kind of think, “Okay, I’d really like to do this, but I can’t do this.” I do think there’s a philosophical divide a little bit between sort of new school thought of “Everybody is going to be connected and it’ll be amazing and this sort of old school.” You know, I jokingly call myself old school knuckle-dragger, you know sysadmin, where I’m just like, “Oh!” I’m like, “I know this stuff will break.” So there’s this philosophical difference, you know, like I think back 330,000 years of human evolution and the stuff is always broken. You know, the cave is leaking and I’m like, “Oh, the cave is leaking, I got to fix the cave.” I think there is always a balance to think, “Okay, well, we’re going to move out of the cave. We’re going to build a house instead,” right? Like some if it is technology, some of it is pragmatism. I think sysadmins definitely bring a lot of that and it can be perceived as being negative. But in a lot of ways, I would argue it’s just pragmatism.
[00:22:03] SY: Yeah.
[00:22:04] SM: I will say there is a bigger challenge though in that, you know, there’s economics of this and that’s the other piece that goes through my mind like as an engineer. I guess sales really helped sharpen my mind on the business aspects of these things. There are macro trends that I just don’t have control over as an engineer. You know, for example Facebook, and not to pick on them at all, but their model is completely and utterly fundamentally designed around connectivity.
[00:22:31] SY: Right. Yeah. That’s true.
[00:22:32] SM: And so do they have any kind of economic incentive to make that work offline? And I suspect the answer is no. And so then their answer is, “Well, then make everyone get online.” Like that’s the answer I could find.
[00:22:48] SY: Yeah.
[00:22:49] SM: That’s hammers and nails, right? Like “I’m a hammer, let’s hit that nail, let’s make everyone online because then my app just works.” I think that’s the one that like I don’t think people… to me, Facebook is not as important as cancer research, right? It’s just how I stack rank the importance of technology, but I think there are medical things. I think there’s a lot of pragmatic stuff that can be designed in a way that works offline that we should definitely be careful not to, you know, make it so it’s dependent on connectivity and then it functions well without connectivity, like microscopes and centrifuges and X-ray machines and CAT scans, you know, especially things around medical and farming equipment and things like that, like I think definitely engineers have a role to play there and I suspect a lot of those engineers that are working on that do have a more pragmatic approach to connectivity, because I’m guessing if you’re farming on a mountain, you’re not always going to have, you know, connectivity for your tractor or whatever. In fact, most of that farming is not even done with tractors. Pragmatic engineers have a role to play there to make sure that some of these more critical things, like things like Facebook and search, Google search are probably never going to be available offline, but definitely more important stuff like food and medical and, you know, maybe news and education, those are the ones that probably… those are probably bridging the gap or those need to be thought about in new ways.
[00:24:07] SY: (Music) And now back to the interview. What got you interested in this topic to begin with?
[00:24:15] CM: I’m glad you asked. I have always been interested in offline because I actually did not start out in tech and my degree is actually in journalism.
[00:24:25] SY: Oh, neat!
[00:24:26] CM: Yeah. It’s great because I really feel like it gives me a completely different perspective on a lot of things. I have people say that, but I genuinely see it. So I started out in journalism and unfortunately I was actually low income and I lived in a rural area. And when I was learning to program, I had to learn to program out of a book, which 20 years ago probably would have been like, “Of course you did. Everybody learns that way.” But back in I want to say 2012, that was probably not the way most people were learning to program. I remember like I would have my book and I would be trying to learn and I would have to drive to the closest like Barnes & Noble to be able to look up the answer to my problem.
[00:25:08] SY: Yeah.
[00:25:09] CM: I’ve always carried that with me, remembering like it was really, really tough, and so there’s been a kind of a thread through my learning and through my career where I’ve always been really interested in like how can we help solve this problem from a development standpoint?
[00:25:25] SY: Interesting. So how did you end up getting into tech?
[00:25:27] CM: When I was working as a journalist, it was really, really clear. You know, everything is moving online and I started researching, you know, how could I do this better? And I realized that I actually really enjoy development more than I even enjoyed being a journalist. And so over time, you know, I learned more and more and then I was lucky enough to get my first developer job and been just coding away ever since.
[00:25:55] SY: So I’m interested to hear your thoughts as a developer on this topic because, you know, for so many years we’ve been told mobile first, mobile first, mobile first, right? In terms of how to prioritize product needs and if you have to pick between web and mobile, like, “Don’t forget mobile. Mobile is the new thing. It’s going to be so big.”
[00:26:14] CM: Right. Right.
[00:26:14] SY: But that also implies that everyone has a smartphone and it implies that everyone has internet on that phone. And so when you are thinking about the future of development and being a developer yourself but then also this knowledge that 25 percent of folks are in rural areas where internet access is an issue, how do you balance those two very different messages?
[00:26:39] CM: there is a new… I don’t if I can say new, but there is another idea besides just mobile first and it’s really, really similar. It’s called Offline First. And so the idea is like, “Hey, don’t forget about offline. You need to be optimizing for that and prioritizing that,” because there’s a lot of people who are having this experience where they don’t have consistent internet access, but even more than that, there is a lot of people who, you know, live in New York City and they lose their internet when they take the subway to work every day. So everybody is going to lose internet access.
[00:27:11] SY: Painful times, painful times. Yeah.
[00:27:13] CM: Exactly. Exactly. Or you go on vacation, there’s a bunch of different ways you can lose your internet. But it’s going to happen to everybody. And so what Offline First says is, “You need to be taking this into account, and even if you can’t offer full functionality of your app in an offline situation, don’t forget about it. Don’t just leave the dinosaur there.” And it’s like, “Oh, sorry, you just can’t get online.”
[00:27:38] SY: Yeah. So in this Offline First movement, can you give me an example of what that looks like? So for example, if we said, you know, Twitter.com, right? Twitter.com is very famous. If you don’t know Twitter.com, it’s is a very famous social media. So for something like Twitter.com, if we said, “Okay, Twitter.com is going to be Offline First,” what would that mean? What would that look like?
[00:28:05] CM: So if you were Twitter and you wanted to offer a nicer offline experience, there are a couple of different things you could do. You could take advantage of something called indexedDB, which is an in-browser database.
[00:28:17] SY: Oh, interesting.
[00:28:19] CM: Yeah. Essentially what it’s doing is it’s offering like an object source, so you have your JavaScript objects and they’re just stored actually on the person’s device. So they’re not going across the internet to get the data. So that’s one thing they could do. There are some functionality in service workers, which are another really big part of Offline First, where you can actually save requests and send them once the person has internet access.
[00:28:48] SY: Interesting.
[00:28:49] CM: There are lots of different things you could do. But the main idea behind Offline First is just taking this into consideration and figuring out, “What works best for my app in this situation?”
[00:29:00] SY: Okay. This is really interesting. So let’s talk about the first thing you mentioned, this indexedDB thing, which is fascinating having database actually in your browser. So in the example of Twitter, when I first, assuming I’m logged in, the first time I go to Twitter.com it needs to get me the latest tweets, right? That’s like the first thing it needs to do.
[00:29:19] CM: Correct.
[00:29:20] SY: So that part, we kind of need the internet for that.
[00:29:23] CM: Of course. Yeah. You do.
[00:29:24] SY: Okay. Just making sure there is like some magical world where, you know, you don’t need internet for that.
[00:29:27] CM: Oh, I wish.
[00:29:29] SY: Right. Okay. Okay. So we have, you know, our one request, our first request where we get all the stuff. When we talk about indexedDB, is the idea that when I click, you know, when I scroll down for example it’s not doing another request and all my tweets are saved in my browser? Is that what you mean or...?
[00:29:49] CM: That’s one way you could do it. So if I were going to make something like this, what I would do is I would first get everything that I can, you know, make a request over the internet and get everything I can. But then once I had it, rather than trying to make a request again, I would just save it in indexedDB and so then the next time I can just load everything locally from the device rather than having to make a request over the internet.
[00:30:16] SY: Okay. It sounds kind of like caching. Is this different from caching?
[00:30:19] CM: It is a lot like caching.
[00:30:21] SY: Okay.
[00:30:22] CM: Is another way of being able to cache. Usually when people talk about caching, they’re talking about caching on a server, that’s like the more traditional way of caching. This is just caching on the device. So it ends up being a lot faster because again you’re not going over the internet.
[00:30:38] SY: Right. Right. Okay. So now let’s talk about the service worker’s ideas, this idea of like saving a request. So what this reminds me of… in the Twitter example is sometimes if I’m usually on my phone and I will write a tweet and I’ll hit send and I won’t have internet for a second or for a little while, I’ll see something that it says, you know, “Saving tweet” or “Will send tweet later,” or something like that. Is that kind of what you mean, this idea of not losing my work, and waiting for it to happen?
[00:31:09] CM: That is one thing service workers can do. They’re actually really enormously powerful. So the simplest service worker that if you were going to like write your very first service worker, what you’d probably do is you would cache files. That’s one thing you can do with service workers is say, “You know, I want you to save off like the index.html of Twitter.com.” And so instead of having to over the internet, it’s there and similar to IndexedDB it’s on the device so that’s like really key in all of these technologies is that it’s on the device. It has another thing which I think it’s going to impact people. That’s what I love about this particular tech, is that it’s going to impact to people, and that is background syncs. So background sync is another feature of service workers where it’s what you were just saying you don’t have internet when you hit submit and it says, “Oh, don’t worry about it, we’ll send that when you do have internet.” And it just takes care of it behind the scenes for you.
[00:32:11] SY: Yeah. So with this Twitter example that we’ve been playing with, the point of Twitter is to get the latest news and hear the latest thoughts and you know your feelings about latest, you know, news and all that. So it’s kind of difficult to completely separate that from the internet?
[00:32:27] CM: Of course.
[00:32:28] SY: It is. It’s got a base on the internet, but it sounds like with this Offline First example, it’s not necessarily saying, “You know, down with connectivity and no more internet for you.” It’s more about considering the fact that the person who is using Twitter may not always have internet or may not have great internet or may not have fast internet, and so to make some of those experiences a little bit easier, a little bit better. Is that right?
[00:32:56] CM: Absolutely.
[00:33:57] SY: Okay.
[00:33:58] CM: We’re a long ways off I think from being able to just have a completely distributed internet where you don’t need connectivity. The way I think of it is, you know, you still have to have connection. It’s just filling in the gap between when you don’t have connection and when you do have connection. It’s just kind of making that easier on the user.
[00:33:17] SY: Tell me about this fully distributed internet idea. What’s that about?
[00:33:21] CM: So there are a lot of people working on this idea right now where you… there is Offline Camp. If you go to OfflineFirst.com, there is a camp and I went last year and it was a really fantastic experience and I talked to some people who are working on this. And the idea is, one of them was really fantastic, was you could actually have a network based on cellphone coverage and it sounds really sci-fi, but they’re actually really working on it. And so you would rather than using Time Warner or whatever ISP internet service provider you’re using, it could be based on cellphones, which is fantastic because you’re probably always around people who have cellphones. There were other talks about using Raspberry Pis and creating an internal network of Raspberry Pis. There’s a lot of different ideas out there for a more distributed internet.
[00:34:17] SY: Interesting. Yeah. Oh, very cool. Okay. So I think the first, especially for newer developers, I think we really take the idea that we need the internet for granted in terms of app development and product development. You just kind of assume that, “Yeah, you know, you got to talk to the server so…”
[00:34:36] CM: You have to have internet.
[00:34:37] SY: You have to have internet, right? Obviously. So I’m wondering now that you have immersed yourself in this offline-first movement and you know a ton about this world, are there things that we rely on the internet for that we don’t really need to?
[00:34:54] CM: That’s a tough question because the nature of our world right now is distributed world, right? Like for instance you and me right now, like you’re on the West Coast I think and I’m in Oklahoma. So we’re able to do this because of the internet. So it’s really hard to say that it’s something we don’t need. I definitely wouldn’t say that. I would just say that we have tech right now that we could use to kind of ease the difficulties for people who don’t have access.
[00:35:27] SY: Yeah. Because, you know, when I think about just general optimization, there are a lot of things that we do that we don’t realize is expensive, you know, image optimization comes to mind, you know, first just using huge files and just not thinking about compressing them first.
[00:35:44] CM: Absolutely.
[00:35:45] SY: You know, just not thinking about making them smaller, you know, before… and just things that again because, you know, we might have great internet ourselves and we just don’t realize that, “Hey, that could be a really big deal for someone else.” So I’m wondering, are there other parts of apps or other parts of app development that we might take for granted but would be a huge, you know, a huge deal, I mean really impactful for folks who either don’t have internet at all or don’t have really great reliable internet?
[00:36:15] CM: So a good example is actually CNN during Hurricane Maria last year in Puerto Rico. You know, they lost power. They were relying completely on cellphones. They were down to like what we would consider probably really, really slow internet speeds, 2G and below. And they were in a situation where they needed to get the news, they needed to know what’s the weather going to do, is it safe, what’s the situation? And so what CNN did was they started serving up like… it kind of looked like an old version of CNN really because it didn’t have the fancy bootstraps and it didn’t have the big giant JavaScript libraries bundled in. It was just like a much smaller version of their site and it worked a lot better in the situation that the people were in where they were having to use their phone to access CNN to see what the weather was doing, what the current situation was. And so that’s another thing you can take into consideration is like the size of your site actually makes a really big difference as well for a slow connection because that’s a problem too.
[00:37:24] SY: Absolutely. Yeah. I was talking to someone in our community about a couple of months ago I think and just asking her about [INAUDIBLE 00:37:41] process and she was talking about how, you know, she technically has internet in her home, but it’s not that great, it’s not very fast, and she was talking about all these things that she has to consider when using a website. You know, she has to think about, “Okay, how many clicks does it take me to get to what want to see?” Because if each click is a new request, well then it could her 20, 30 minutes to get to the things she ultimate needs to get to.” You know what I mean?
[00:38:00] CM: Yeah.
[00:38:00] SY: And the more she was talking, the more I realized like, “Wow, as a developer myself, I think about clicks in terms of, you know, just minimizing the work you have to do, but I didn’t think about that related to how long each click might take if you don’t have good internet.” There is a decision of like, “Should I even bother?” You know? Should I even bother clicking on this link because who knows, you know, if there is like a ton of video and uncompressed images on the other side, well then I’m going to be here for a while.
[00:38:29] CM: Yeah, absolutely. It’s definitely not just a situation where we’re optimizing for people who don’t have internet, slow internet is something to consider as well.
[00:38:39] SY: Yeah. So when do we think about these things as we work on a new idea, a new app? Is it something that we need to plan for at the very beginning? Is it an optimization step at the end? When do we start thinking about these things?
[00:38:56] CM: For me, I started thinking about it pretty immediately. When I’m planning out a workflow of an app, I think like, “Okay, when they first start, what happens if they don’t have internet?” And like as we go through, like it’s a question that’s always in my mind. You know, “What do we do here if they don’t have internet?” And again, it’s not necessarily that they’re going to have full functionality without having access to the internet, but it’s just something where we’re taking it into account. And you know maybe it’s just a message where it says, “Hey, you don’t have internet right now. We’re going to try that request for you again later,” or maybe we don’t even try the request again later, but we just, you know, kind of acknowledge like, “Hey, you don’t have internet.” So it’s not just an error and they’re left wondering, “Why am I getting this error?” A lot of the Offline-First techniques like service workers and indexedDB, they would be probably pretty difficult to implement after the fact. So I would definitely recommend if this was something that someone was interested in, which I hope it is because I love it so much. It’s such a big deal.
[00:39:55] SY: Yeah. It’s a fascinating topic. Yeah.
[00:39:58] CM: Something to definitely implement and think about all through your project, don’t wait until the end, kind of like accessibility. It really is a lot like accessibility. You don’t want to just put that in at the end.
[00:40:08] SY: That’s a good point because it’s not just a good thing to think about at the beginning, but it may be something that would be more expensive to think about at the end as well. What are some decisions that might be different if you have an offline-first approach? Is it that I would use a different database, a different framework altogether? What are the decisions that might end up different if I decide to pursue Offline First at the beginning?
[00:40:36] CM: So when you are first creating a site, a pretty simple example I like to use is say you have a newsletter and you have a form, and somebody, they put in information and they clicked submit and they’re signed up for your newsletter. If you are going to say use indexedDB, the database in your browser, you have to know at the very beginning when you’re setting that up, you know, what information from this am I going to save? And so that could impact how much information you want them to put into your form because there is a limited amount of space that indexedDB can use. It varies browser to browser. So it’s definitely not small. It’s not like local storage where you’re limited to like 10 megabytes. It’s quite a bit bigger than that, but it is limited. So you just kind of want to be conscious of the fact that when you’re caching things on someone’s device, you’re not working with a server with a terabyte of hard drive space, you know, you’re working with something quite a bit smaller. What I would say in that is you just want to be thinking about being conscientious to that person’s device and saving like what data do you absolutely have to be saving and start from there.
[00:41:45] SY: Yeah. If I decide that I’m going to do offline-first at the beginning, how much new stuff do I need to now learn? Is it still within the realm of web development and it’s stuff that I can just replace things that I’m already using or do I need to now go out and learn new tools, new strategies, new languages, frameworks? What’s the learning curve of doing offline-first?
[00:42:10] CM: I don’t think it’s a big learning curve especially you’re using like a popular framework. So if you’re learning Vue or Angular or React and you’re using their scaffold apps, so like Create React App is a really great example, they actually have a service worker built in for you.
[00:42:26] SY: Oh, that’s nice.
[00:42:27] CM: Yeah, it’s pretty great. I love that it’s starting to really catch on. I think that in the next couple of years it will be weird if you don’t use offline-first techniques than if you do. So if you’re using a popular framework, a lot of it is going to be kind of built-in for you. In terms of indexedDB, like caching data in that way, as long as you know, like my object that I send to my server looks like this, IndexedDB needs to look, you know, pretty similar as long as you have a good understanding of that at the beginning, then implementing it is not bad.
[00:43:04] SY: Yeah. Okay. How do I test how well my app does in an offline-first environment? Like I’m thinking like there are a bunch of optimization tests I can do see, you know, how fast does my page load and that kind of thing. Are there similar audits or things I can do? I guess I can just shutdown the internet and see my how my app does, but are there… Yeah, go ahead.
[00:43:29] CM: Yeah. I’m glad you asked that because DevTools actually has really great ways that you can test this. So if you open up DevTools and you pop over I want to say it’s in the network tab, they actually have a variety of speeds that you can run your site under.
[00:43:43] SY: Oh, wow!
[00:43:45] CM: Yeah. It’s really, really helpful so you can run it as like 4G or 3G or dialup or no internet.
[00:43:51] SY: Oh, that’s great.
[00:43:52] CM: It has a whole bunch of different options so you can see how it performs with, you know, really fast, not very fast, really slow or no internet. You can just see all the differences.
[00:44:03] SY: Oh, that’s wonderful. I’m glad that just comes built-in. I don’t need to download anything.
[00:44:06] CM: Yeah. It’s really great.
[00:44:07] SY: That’s awesome. Yeah. Yeah. So when you were leaning about offline-first yourself, what was the hardest part for you in adopting that mindset or implementing some of the things that you were reading about?
[00:44:23] CM: When you have access to the internet all the time and it’s something you’re used to having access to, I think that it can be hard to sell on the idea that this is something we should be considering. At Offline Camp last year, we had a lot of discussions around the idea of, “Okay, we know this is important and we really want to help people who don’t have good internet access, but how we sell that on a business level?”
[00:44:52] SY: Right. Yeah.
[00:44:53] CM: So that can be a struggle and then just in your own mind, like it’s a different way of thinking, like if you have lightning fast internet, you’re probably not worried about sending that whole giant JavaScript bundle, but you have to think about it in another way. You know, everything is probably going want to be smaller, your files will want to be smaller, saving less data, you know, everything will kind of want to be smaller than what you’re probably used to.
[00:45:19] SY: Yeah. That makes sense. So are there any low-hanging fruits for offline-first or are there things that, easier things, the little things that we can do to kind of get the ball rolling on that and help folks who don’t have a lot internet?
[00:45:35] CM: I think the probably very simplest thing you can do to get started and I’ve talked to people who are really intimidated by it, it’s not so bad is setting up your first service worker. So what you do with a service worker is you’re caching the files and the files are saved on the user’s computer. Once that’s set up, the person, they go to your website, they don’t have the service worker the first time they go, it gets installed when they first visit your website, and then from there, they don’t really need their network anymore, they don’t need the internet anymore.
[00:46:07] SY: Oh, wow!
[00:46:08] CM: And if especially for like a portfolio site or you know something with like not a lot going on, then setting up a service worker is very, very simple.
[00:46:19] SY: What’s been the hardest part for you in going down this offline-first journey? What’s been tough for you?
[00:46:28] CM: I think just getting people on board is a struggle, trying to sell people on it at work because it’s really unfortunate when you’re not in like a more business corporate setting that people will be kind of forgotten if they are not customers, you know. And so I think selling people on the idea that like this is important, this is accessibility.
[00:46:51] SY: Yeah. What makes it so hard? Why do you think people are resistant to it?
[00:46:56] CM: I think that it just doesn’t seem important to a lot of people. I think when you are a developer, you’re just so used… we kind of live in a bubble I feel like sometimes and so you kind of start to forget like what is it like outside of my developer bubble.
[00:47:12] SY: And also for newer developers, there is also the whole, “Oh, one more thing I got to learn.”
[00:47:18] CM: Sure. Yeah, absolutely.
[00:47:19] SY: “One more thing I got to think about,” and you know trying to juggle and kind of figure out, “Where does this fit into all the other stuff I have to learn and at what point do I tackle this?” can be a question too. And so I’m wondering for folks who are hopefully interested and excited in learning more about offline-first in figuring out how to incorporate it in their current apps and their future programs, where can folks start? What’s a good first thing to do to read about how do we level up?
[00:47:48] CM: There are a lot of really great resources out there from the Offline First site that I’ve been talking about, the Offline Camp. They have a lot of really great resources. There’s a lot of really passionate people online on Twitter who want to help you learn. I’m one of them. I would just be so stoked if everybody ran out and started making service workers and making sites offline. There’s a really great community behind it and it’s not something that you have to run right out today and do. I would say it’s more of a way of thinking.
[00:48:22] SY: Yeah. So now let’s move on to some fill in the blanks. Are you ready?
[00:48:26] CM: All right. Yeah.
[00:48:27] SY: Number one, worst advice I’ve received is?
[00:48:30] CM: Someone once told me, “You should be probably stick with what you’re good at.” Yeah. In relation to trying to learn development, I mentioned that my degree is in journalism. I used to write a lot, I still do some here and there, and getting into development was a real struggle for me and I’m really glad I didn’t listen to that person.
[00:48:53] SY: What was the thing you were really good at that they were saying you should just stick with?
[00:48:56] CM: Writing and journalism, I was, I don’t want to [INAUDIBLE 00:48:59] too much, but I guess I was okay at it. I was pretty good. When I first started learning development, I started with HTML and CSS, which I think is really common. And those came kind of naturally. There wasn’t a lot of logic that you had to learn to implement these things and so I was flying right along and then I ran into JavaScript like a brick wall. There’s no other way to describe it.
[00:49:23] SY: That sounds familiar.
[00:49:24] CM: Yeah. Exactly. It was really hard to pick it up. I struggled for a really long time. I think they meant well, but it was just hard for them to understand like, “Why are you putting yourself through this?” Like it was just… I was banging my head against the wall over and over. And yeah, I’m glad I didn’t listen to them.
[00:49:44] SY: Me too. Otherwise, we wouldn’t be having this awesome interview right now. So thank you.
[00:49:47] CM: Yeah.
[00:49:50] SY: So when that person told you that, and I’ve received messages like that myself as well when I first starting and I’d say, “Oh, I think I want to learn coding.” And they go, “You’re really good at taking and sales and you should just do that stuff.” And I was like, “Ah!” How did you respond? Did that affect your resolve? Did it slow you down? How did you deal with that advice?
[00:50:09] CM: I can’t say it didn’t slow me down. I can’t say that I didn’t, you know, stop and ask myself like, “Why am I doing this? Is this going to work?” But I kind of just put my head down and just kept at it and also kind of didn’t talk to that person as much.
[00:50:29] SY: And you never saw him again.
[00:50:30] CM: Yeah.
[00:50:32] CM: I think new developers will get that advice and the best advice I can give if you’ve been told something like that is please don’t listen to that person, that person probably doesn’t know what they’re talking about, and it is hard. I definitely wouldn’t tell someone. “Oh, yeah, get into development. It’s so easy.” No, it is hard, but it’s also really worth it and especially in the context of this, like I’ve mentioned this is a people problem and that’s what I love about it is we have the power as a developer to help people with this. And so it is hard, but it is worth it.
[00:51:11] SY: Yeah, absolutely. Number two, my first coding project was about?
[00:51:16] CM: My first coding project was an Ionic project. Ionic is an angular framework that will help you create mobile apps and it was an attempt to teach kids really simple HTML and CSS. And I was really focused on it being a mobile app because I knew that internet is fickle, I guess, you could say. And I knew from personal experience like I can have an app on my phone and I can learn on my phone and I don’t have to have internet access to do that. And so that’s why I was really focused on a mobile app.
[00:51:50] SY: Number three, one thing I wish I knew when I first started to code is?
[00:51:55] CM: I wish I had known that it’s not so important to do things the exact right way the first time.
[00:52:01] SY: Oh, I like that.
[00:52:02] CM: Yeah.
[00:52:03] SY: Tell me about that.
[00:52:04] CM: In one of my early developer jobs, I had a really fantastic boss, and I tend to get really in my head when I’m working on a problem and I’ll be like, “Well, I could do that except, oh no, that wouldn’t work because X, Y, Z.” And I’ll just go around in this circle where I just do that over and over. And he said to me, he said, “Carmen, don’t worry about getting it right.” He said, “Make it work and then make it right.” And I think about that all the time. And so I wish I had known that a long time ago.
[00:52:32] SY: I feel like that can apply to so many things too, right? Like when you’re cooking and trying new recipe, just make it work, let the meat be cooked and the sauce be saucy.
[00:52:42] CM: Exactly, exactly.
[00:52:43] SY: And then the next time we can worry about like making it right and having the spice and the flavors right. Yeah. But I love that kind of mantra, I guess, that saying in development, “Make it work, make it right, make it fast,” that’s huge. You got to focus on the right goals at the right time. Yeah. Wonderful. Well, thank you so much Carmen for having us a great and educational conversion of offline-first.
[00:53:06] CM: Thanks for having me.
[00:53:06] SY: This is wonderful. Yeah. You want to say goodbye?
[00:53:09] CM: Yeah. Thanks so much for having me.
[00:53:10] SY: And that’s the end of the episode. Let me know what you think. Tweet me at CodeNewbies or send me an email, hello@codenewbie.org. For more info on the podcast, check out www.codenewbie.org/podcast and join us for our weekly Twitter chats. We’ve got our Wednesday chats at 9 P.M. Eastern Time and our weekly coding check-in every Sunday at 2 P.M. Eastern Time. Thanks for listening. See you next week.
Copyright © Dev Community Inc.