Empower your business to easily send and eSign documents with airSlate airSlate SignNow

How to create outlook signature

Oh, my God, I'm just really excited that song played. How is everyone doing? I am both nervous and excited. This conference has been really awesome and wonderful so thank you all. I'm here to give my talk navigating front-end architecture like a Neopian. First off, a little bit about myself. I'm Julia. I go by she/her. I work at Mailchimp in the Oakland office in is an Francisco. I'm from don't I don't. Hopefully we win the FBA finals! I do a lot of communicating work and Mental Health Activism. I really enjoy sleeping. As Meri mentioned I founded an open source project five years ago, if-me.org, a mental health open source app. Before I do this talk, I want to give a shout out to the teens and tweens that grew up hustling on the internet building websites and designing graphics, especially all of the women out there. I guess my show of hands, like how many folks were on Neopets, Zenga, LiveJournal, GeoCities. The list of these on. It's cool how we are doing awesome things. Yes, this talk, as you can tell from the title is very much centred around Neopets. Neopets is a virtual pet site, basically, the premise of the site is you have these virtual pets. He feed them, buy nice things for them, and you just make them happy. I'm really excited about this slide because it was fun making it, and I found this really cool gif of the spinning Neopia world which is really cool. Neopoints is the currency for Neopets and you play games, and you can buy objects and buy real stuff to feed your pets and useless stuff. Neopets is like capitalism for kids. It basically teaches you a lot about capitalism, and what it is like to hustle in the real world. And, yes, basically, you play these games with your Neopoints and things aren't easy like the real world. There isn't a meritocracy so you can't play a bunch of game and redeem all your points at once. You can just submit your score three times a day per game and you have to be pretty strategic about whether you want to send your score or not. And, you know, like the real world, you can make some questionable decisions, and play with chance and luck. There is gambling. So you can gamble with Neopoints and there is a stock market, which is really cool. Capitalism for kids. Quite fun. But, yes, I was very much active on Neopets as a kid and as a teenager. I don't know if you can actually see this slide, but as you can see, I was really into this band called Evanescence, a gothic metal group, I was an angsty kid, I started playing on Neopets, bought useless stuff, level up in the game, and then I started slowing getting into the community side of Neopets. So, yes, like a lot of teenagers and tweens in this area, a lot of us started on sites like Neopets, and what was cool was you could customise the sites, edit the HTML, the CSS if the sites were fancy, you could do JavaScript, so, for me, this evolved into making websites and doing graphic design. These are some graphics I made. If you were a teenage girl in this era, you're probably really familiar with this. This specific graphic is called a blend, and basically we would get these PSD cutouts of celebrities and musicians we were into, get grungy fonts and we would create these graphics using torrented versions of Photoshop or Gimp if we were afraid of the FBI! But what is really cool about this era is there is so much like excitement about creating things, and so much excitement about sharing things with the world, and along with that, it's the realisation that, oh, I made this. Don't steal my stuff. So that is actually legit a screen shot from a site I have where I was like these are all my cool graphics and cool layouts. Don't steal my copyright! So it's really amusing at an early age we have this idea of ownership and intellectual property. So, yes, it clearly worked out for me. I am now a software engineer. I both pretty lucky and privileged to be in this position. Like a lot of developers in this room, when you start off your career as a software engineer, you start off as a generalist, exploring all aspects of software engineering, back-end, front-end, the mobile web. Very much started off that way. Started off doing full stack web development, Android development, worked at diverse array of companies, doing consulting and agency work and then also doing product development at more mission-driven companies. So, yes, that evolved into me becoming more of a specialist. I think that inevitable Premier progression, you started being a generalist and you realise I'm not interested in everything. I'm interested in very specific things. So this talk is basically about that. I've come to become an expert in front-end architecture infrastructure. I feel like the words are very interchangeable. I will be specifically talking about these experiences, and learnings, and commonalities and differences between all of them. So, yes, I think one big misconception about front-end architecture is, especially when you're starting out, that any type of architecture infrastructure work is just laying the foundations for the codebase and setting up frameworks and all of that jazz. As probably everyone in this room knows, you constantly have to maintain it. It's like a living organism. Things constantly change, we're constantly changing technologies, technologies are constantly being deprecated and upgraded. It's really important to allocate time, resources and teams into growing out your architecture and infrastructure. And on top of that, there is a lot of evangelism that comes with doing this work. You have to create best practices, you have to uphold them, and you have to find ways to iterate on them. So, I think all of this is analogous to hustling on Neopets and trying to earn Neopoints and survive that kid capitalism world. I will be saying and giving a lot of analogies towards that.. so, yes, I started off very much doing product development right out of college. I worked at Indiegogo, a on product teams working on a bunch of features. Within several months or so, I started looking for something else to do. And at the time, I was really lucky and privileged to have a really great manager who was really interested in my career development, and when I reached out to him, I was like I want to challenge myself more technically and focus more on engineering rather than just building up features. So because of that conversation, and because of his commitment to help me grow as an engineer, I ended up on the performance team at Indiegogo. I think all of us in this room can relate we are always working on legacy codebases. I think legacy's often like a dirty word, people think it's terrible. There was a talk a few moments ago where someone used the word "legendary". I thought that was really cool. Yes, I think the minute you write down code, it's like a C, nothing is ever not like a C. We are doing infrastructure and architecture where it's important to keep in mind we are working with legacy codebases, and the reason why we change things is because something's wrong with it. So, yes, the performance team is actually a really interesting team to be on. This was the first infrastructure team I was ever on. Being on a product development team, things tend to be clear what you're doing: you have a product manager, you have very specific Scrum duties that you have to do, there are OKRs, a backlog. The work that you're doing is more measurable, and this is really the first time I was on a team that was open-ended and more exploratory. So it prompted the creation of the performance team at Indiegogo was actually the performance of the site, so the main feature of Indiegogo is the crowd-funding aspect, and this page is super important. It has all of the information, all of the data on essentially what you're giving money to, so, as you can see, there is a lot going on in the paling. There is a lot of text, there are a lot of images, there is a lot of videos, and the speed in which this page renders makes a huge difference on whether someone gives money to an awesome campaign. So, we started the performance teams because we started noticing performance issues, especially in countries where internet connections were low. And not even that, but just even like within the US as well. Going back to Neopets, it's a pretty simple analogy here, like the faster your pages load, the more money you get. Neopets, the more you play games, the more capable you play these games, and the more well you play these games, the nor Neopoints you get. So is the Indiegogo was Ruby On Rails and Angular.js - the first version of Angular - with TypeScript, and a lot of teams use metrics before you actually make changes. In web performance or any performance, there's kind of two ways to collect data: there's run data which is real-user monitoring data, based on user-collected data through event-tracking, and then there's synthetic monitoring, so using simulators to mimic specific environments, internet connections, browsers, operating systems, the list goes on. And then based on this data, you figure out a budget on, you know, how much you want to cut or improve in terms of performance. We did a lot of the standard things that you do when you do web performance. We looked at pre-rendering, the HTML and CSS, we also looked into server-side rendering, and specifically, we were caching the JavaScript and the images through a CDN, or a content delivery network. And other ways, other fast wins that we had while working on performance was minifying and optimising the assets for JavaScript, CSS, and images and videos. How we did the SSR was we cached the JavaScript and reinjected the JavaScript into the dynamic parts of the page. And this actually causes some issues, because we were using a CDN to cache the JavaScript, oftentimes, the cache wouldn't refresh on time, so, it was really hard to reproduce the bugs because they were only production, and something that we did that was really interesting on this team was we refreshed the cache based on the number of hits that a certain campaign page got, and we basically had an algorithm that figured out the likelihood of when a page would actually change so that that the cache would be refreshed. So, yes, that was our main issue during this performance work. Interestingly enough, while doing this work, I was also spearheading initiatives for accessibility at Indiegogo. While on the performance team we noticed a lot of similarities between the two, from an engineering standpoint, I think when you do write accessible code, specifically HTML and CSS, that generally means that the code is also performant, so you get a lot of really easy gains for performance just by writing really good markup. And when I talk about performance, I mean both perceived performance and measured performance, so perceived is basically what a user experiences. It may not necessarily be quantity fine ly fast, but that experience of the page doing something versus measured which is I'm literally timing how fast the page is loading. So, yes, from an engineering standpoint, there were a lot of similarities, and I think the main similarity I found between accessibility and performance was actually the process of integrating it into an engineering team, and evangelising that knowledge. So I think on paper, all of us will agree that good performance and accessibility are really important, and I don't think that's a very debatable topic. But I think the biggest challenge that we encounter as engineers is actually integrating that work into our engineering process, and I find accessibility and performance really similar to evangelising testing, or getting your team to do refactoring. What often happens is if you do all of this work at the end of your product cycle before you - before or after you launch your product or feature, and you just kind of are scrambling for a couple of days or a week to integrate these features, and you kind of never revisit it again, so I've come to learn that, when you are evangelising accessibility or performance, or testing or refactoring, it's really important to include that as part of your development process or your engineering and design process from the very beginning. And part of that is also sharing knowledge. So, when I say knowledge-sharing, I don't just mean creating docs for other engineers, I mean teaching people and educating people from analytical standpoint why these things are important, and because we do want to integrate accessibility and performance throughout the entire life cycle of software development, I think it's also really important to educate product managers, designers, basically any type of stakeholder that we are working with. And if your company is a product company, and has support or marketing, it's actually really advantageous to do that. So I ended up doing that at Indiegogo. We created a bunch of workshops and educated the entire company, and had specific documentation and workshops, and articles for specific parts of the organisation. So, yes, we did this performance work. We had a lot of huge performance gains, the page ended up loading really quickly. We basically wrote our own implementation of NextJS. At the time, there weren't a lot of SSR server-side rendering option s out there. It was a lot of work doing this. By the time we finished the project, we realised that this page would have loaded faster if we stopped using Angular JS which I think a lot of us have probably encountered before. But no biggie. Basically, with that realisation, we realised, okay, so even though we did improve performance, we still have this huge debt of this old framework, and it's not working properly in terms of supporting our needs when it comes to performance and accessibility. So because of that, our team, our performance team, Italy became the front-end Spikes team. "Spikes" is a term in extreme programming and it is basically a term that means you have a hypothesis of an idea or of something you want to try out, and then you time-box it and investigate the work and time and resources that you would need to go about exploring this hypothesis. Then at the end of the time box, you think can I continue with this or not? So we actually decided to do that for front-end frameworks. Which is really rare. This is the first time ever in my career where I got paid to learn, and just like read a bunch of tutorials and delve deep into technology. So, yes, we were a pretty, like, small team of five people. Led by the amazing Jen-Mei Wu and we decided to spike four technologies - Angular, Elm, React, and Vue. Each of us on the team were the experts for each of these frameworks. We were give a framework to explore in depth and, based on that, share our findings and make a decision. I was the React expert. So, yes, typically, when you do make decisions about front-end web frameworks, you have to consider all of these things. I'm not going to talk talk about everything on this list, but when you're on this type of team, you can't just like arbitrarily decide we're going to use React or Vue, you have to investigate why you want to use these things. Before we started investigating these frameworks, we actually basically came up with a wish list and a rubric of things we were looking for. I will highlight a few things. For us, international isation was really important, testing, and state management. This was a long list. We spent a lot of time actually building out every brick of this list and detailing what exactly we were looking for. I think when you're doing a spike process, you want to be "objective" and this is a kind of a way to do that. So, yes, the spike process. How did it work? We had this framework criteria of our massive list of things, and essentially, we wanted to test all of this out but in a production-ready environment. Typically, I think in your free time when you're testing out frameworks, you're not thinking about production-ready, you want to create a starter app or a "Hello, World" app. But we felt that the only way to actually figure out whether we wanted to use something was to actually test it out on something that mimics our production. So we worked with a designer, and a product manager, actually, to make a production-ready app that had a lot of the features that Indiegogo has, and also tested for all of these awesome things. Each week, we would choose a theme to investigate. One example was one week we looked at state management. And we spent that entire week investigating state management deeply in each of our frameworks and trying to build it out in this app. And then what we would do at the end of the week was report back to the entire organisation and our team on what we found. We talked about the pros and cons, we also had programming sessions where we showed each other how to to this, and this is a way of sharing knowledge and sharing insights. And another thing I want to highlight is, when you are on an infrastructure team typically, it kind of feels like you're gatekeeping all the time and making decisions in a small group, so it's really important to include the entire engineering organisation in this, because at the end of the day, they're using your architecture. So, yes, we had these weekly presentations each week centred around all of these criteria points, and at the end of the entire process, we made a report card. We went through this entire list and basically scored each of the frameworks on their ability to execute all of these things. Then, based on that, as objectively as possible, we made a decision on which one was the best for Indiegogo. So, actually, what ended up happening was that Vue and Elm won, they were actually tied. We actually decided to go with Vue because of developer happiness. We noticed that a lot of the more senior engineers were really excited about Elm. A lot of them hate the JavaScript and really loved Elm. The more junior and middle engineers were uncomfortable with having to learn functional programming and learn an entirely new language and paradigm. So even though our Spike process aimed to be "objective", I think it's important to acknowledge that bias, exists all the time. There is good bias and there is bad bias, so in this specific example of us choosing Vue over Elm, I think this was an example of good bias. At the end of the day your customers on any infrastructure team or your - are your developers, so you want to do what makes them happy and do what they can to grow out their careers. As I said, personal bias, is always there. It's not to be feared. It's important to point it out when it does have negative effects. And I think another thing that I experienced was, because each of us were assigned to a specific framework and we were represented as a vet, I felt myself being competitive because I really wanted React to win and each week we would have these weekly presentations, and it felt like American Idol or something, go up and perform our songs, and get judged by the audience, so I found myself getting really personally invested in React, and I think that's kind of speaks to overall the sentiments we have as engineers, like we get really attached and personal ly - we find a lot of personal happiness in the tools and languages of the stuff that we use. One example is, you know, there are always flame wars when people are talking about text editors, like Vim or Emacs, and the list goes on, and I remember on my team, the person who was focusing on Elm - his name was Curtis - he really loved Elm. During our we think presentations, he would write haikus about what he had discovered about Elm. Just a level of attachment that we have to our tooling. I think it's okay, I think that is personal bias, that is inevitable but it's also important to acknowledge that, at the end of the day, when you're on an infrastructured team, or on any team as an engineer, you want to make the decision that benefits everybody, not just yourself. Like I mentioned earlier, we were super lucky to be paid to work on this for a bunch of months, to work on just learning React and other frameworks in detail, and doing this entire Spike process. Oftentimes, a lot of companies and organisations don't have this privilege. Sometimes, you have to quickly make a decision just for the sake of getting your products out. And back to Neopets. So sometimes, it's really hard to play games all the time and play them well and get Neopoints. Neopets is nice. There are some social services. You can get Neopoints from the money tree, a thing called Neopets daily. There's a giant omelette where you get one piece of omelette each day. There's a jelly version. But this is all created because, you know, sometimes, we just don't have time to hustle and get Neopets through games. We want free stuff and easy wins. This is a prime example. So, yes, actually, the this segues into my next experience with my open source project, if-me.org, where we didn't have a spike process when it came to using and choosing a new front-end framework. Actually, we started off with jQuery in our front-end, and our app as well is a web app that is Ruby On Rails and using jQuery in the asset pipeline. If anyone has worked in that before, you know it's not fun and it's not great. Having a actual front-end framework was actually advantageous for us. We're now using React and using Flow, and honestly, the reason year using it, because, at the time, the developers who were contributing to the project really liked React and had experience with it. Being an open-source project, you have limited resources. Developers are very hard to come by, especially for an open-source project that is mission-driven, so sometimes, you just have to choose what is most convenient for you. And for us, another thing that prompt ed using a new front-end framework was actually we wanted to redesign the site. So, this is what the site looked like before. It was using jQuery. A lot of really hackie code. Some CoffeeScript. It was kind of a mess. We used the opportunity to change front-end frameworks to resign the site which was really cool. So, yes, what was really cool was we ended up using Storybook as a UI sandbox to build out our components, and, instead of just building out new features and redesigning our pages at once, we used the opportunity for the redesign to work on a component library, or a design system. Our redesign was actually done by this amazing developer Nishiki Liu. He's really awesome. We used the opportunity to build out a design system, and, you know, we wanted to do it right from the start, so, we tested all of these components, and then we also made sure they were accessible. Yeah, I think most of us know this, where, you know, we are doing all of these changes to migrate to a new front-end framework, but the stuff does not happen overnight. So, it's really important to acknowledge that these changes are incremental, and you kind of have to find ways to do this incrementally. And also document the process as you go along. So being an open-source project, we've come to be really good at documentation, and I think documentation is really important in open source because that's the only way you can communicate with people because everyone is distributed remotely. And for some context, we actually ended up using this really saw some gem called React on Rails which bridges together Rails and React for us and does the pack magic. There are pros and cons. Pros it's out of the box, don't have to invest too much resources into this. The cons being there's a lot of magic going on, and so we actually started to see some of the ugliness of that when we were customising our app, especially for internationalisation. Another really special thing about my open-source project is that we try to be inclusive to beginners to open source, so this redesign was actually an opportunity to get more people who are newer to open source or new developers to contribute because we were building out this component library or design system. It was really easy to create issues out of who wants to work on the button component, et cetera? So that was also really great opportunity to include everyone else. So major issues that we did encounter had to do with internationalisation. Finding ways to bridge the server identified and the client side in i18n and that is where we discovered using the services of a premade architecture. Being an open-source project, we had to make sure everybody knew this throughout the process. We had weekly updates on Slack, peer programming sessions with people finding out about migration. Another interesting thing is my open-source project we have contributors around the world. I quickly learned that not everyone speaks English at their first language, so making sure that the documentation you write is understandable to all sorts of English speakers, and being a Canadian that lives in America, making sure that the slang that I use is understandable or just not there so that people can understand. I really - what I find really special about the Neopets era of the internet is that it kind of reminds me a lot of maintaining an open-source project. It was such an open community where people were sharing the things that they were working on and providing feedback and generally, it was a nice experience for people, including myself, and I think maintaining an open source project in terms of Neopets is really spectacular to the community forums on Neopets that are called Neoboards, a place where you can get help for anything on Neopets, talk about anything, and you can share the art and graphics that you're creating. And the next level of community organising on Neopets is actually a guild. A guild is essentially a group of people who have a shared interest in something, and it's literally just a forum that is more closed off and you can work on fan fiction, you can have discussions about things, you can trade items. It's essentially a community. So, for me, no surprise here, I had an Evanescence guild, and memorised their songs and all these useless facts. For me, it was awesome, because not only did I get to express my love for Evanescence but this evolved into creating websites and getting into web development. I think that's a really similar story that a lot of people have encountered in that generation. You're building sites on these small sites like MySpace, or Neopets, et cetera, and then you realise, wait. , I want to expand and build my own website outside of this ecosystem. I kind of like to call this like a green field process - you're building something from the ground up. So back in the day, you know, being a tween, I did not have access to hosting and domains, so a lot of us used free hosts I like Anglefire, Tripod, and Freewebs. What is interesting, as we got older, we were able to afford domains. Back in the day, domains were really expensive, so it was a huge status symbol to have a domain. This brings me to my next work experience where I also worked on a green field project. I worked at Headspace in their San Francisco satellite office where I was lead engineer. So, yes, this is a really interesting experience for a number of reasons. But essentially, we had to build an MVP in less than six months for this product, and it was also a pilot to use React over Ember. It had space, all of the web microservices were using Ember and PHP. My project was the first time we were using React, so on top of architecting this new product, I also had to evangelise React. So this is a really exciting opportunity for me, because I was, like, oh, my God, I've never been in a situation where I don't have to work on a legacy codebase. I get to do the right thing from the start! I get to write tests, get to make it accessible, I get to write this documentation, so I was really excited, and kind of like my experience that if-me.org I started building a design system for all of the components, the whole shebang, tried to test it properly, work closely across different teams to make sure it could be used throughout the organisation. Unlike my other experiences, this is my first time architecting a single-page app, when I worked in Rails ecosystems, it was all within a monolith and couldn't migrate the app to a single-page app right away. There is a whole bunch of things that comes with working with a single-page app and working with microservices. You have to build out your own state management system, you have to think about versioning and releases, you have to think about testing throughout all of this. And you also have to think about evangelising. So, yes, this is really exciting working on green field project. I felt really excited and overwhelmed with the thought of building something from the ground up. And I quickly realised, wait, I'm still working on a product company. I'm working with product managers and deadlines. So you can't always make all of the right engineering decisions at once, even if you are working on something from the ground up. So it's really important to strike a balance between doing this and shipping features. And then this brings me to my last experience. I'm currently now working on the front-end platform team at Mailchimp, and our team is all distributed, ands it's led by Danielle Espeset, and we're migrating from Dojo o to React. What is special about this team I'm working on now is everyone in our team focuses on specific areas of the front-end platform and we are basically assigned to be experts in different parts. Some folks are working on testing, some on documentation, some on automation, some on performance. I think this is really awesome because it provides opportunities for leadership and growth. What I've been specialising in is the documentation engine. Basically, finding ways to automate documentation. I think typically, people write documentation on wiki somebody, Google Docs, Confluence, and it's hard to keep up to date with. I've been exploring ways to update docs based on inline comments in your code. Based on this experience being accessible. Being able to access these docs within the code editor and outside of it on a static website. So, yes, just a quick example of how JS docs works. You can write markdown in comments and my generator will extract the comments and make docs from it. Providing you two options, viewing the docs on the editor and also on the website. Yes, I think especially working on a front-end platform team, it's really important to consolidate your docs, and make it accessibility throughout your developer organisation. But, yes, what is really interesting about this team was this was the first time I, this is the first time I was on a team where I was not there from the start. So, working on the documentation engine was actually really interesting, because I was also learning the history and the context of the decisions that I made before I joined. I think when you're on any type of infrastructure team, you feel the need to constantly share ideas, and be, like, I had this awesome idea for this thing, and I did this last thing at my last company, and we should do it here. This it the is the first job where I learned it's okay not to constantly suggest things. It's really important to stop and listen, and actually take in the information and learn the history of the team. Because at the end of the day, you want your codebase to be healthy. So, yeah, I've been really fortunate where I started working on infrastructure teams at the beginning of my career, and it really helped accelerate and grow my own career, so I've come to realise it's really important to have diversity on your infrastructure teams in terms of engineering levels, but also in terms of folks from under represented backgrounds. It's such a huge learning opportunity to have diversity on these teams, because at the end of the day, your customers are all of your developers, and infrastructure teams should not just be managed by senior people because you do have junior and mid-level engineers on your team. And it's really important to document all of these processes and share knowledge. There are so many ways we can do this - weekly round tables, news letters, public Slack channels and office hours, and also peer programming. Here are some key takeaways. Essentially, overall, it's just really important to share knowledge and provide opportunities for growth on infrastructure teams, and also include all of your engineers, not just the engineers on that team, because oftentimes, these teams can kind of feel like they're gatekeepers, and on top of that, I've actually been working on this right now, but once you do create new coding standards for your new architecture, it's also important to re-integrate that into your interview process and make sure that the new engineers you're bringing in actually align with the values that you've created. So, yes, Neopets is really cool because there is a lot of knowledge-sharing that goes on. There are websites out there where you can get cheats, links to dailies, forums where people are supporting each other. We can learn a lot from these communities. And I like to talk a lot about 2000s, teens, internet culture. I think it's a special thing. It's not just my origin story, a story that a lot of engineers out there have, especially women engineers, and it's really cool that we're all here kicking ass and doing awesome. I just love that time in the internet. It was so pure, and we just did so many awesome things. Before I end my talk, I do want to make a public service announcement. Neopets will be launching a new mobile app this year, so look out for it! I'm really excited. Anyways, thank you!