Just a few months in the past, I labored on what might be probably the most outstanding and thrilling challenge of my profession up to now. It’s an exquisite free platform that brings collectively inspiration and motion known as WaterBear, and I’m thrilled to let you know all about it on this two-part article sequence.
I need to introduce you to the WaterBear challenge and canopy the targets, technical stack, and group dynamics that went into it. As that is additionally my first time taking up the function of lead developer on a challenge, I’ll additionally share some essential engineering administration challenges I encountered and insights from this expertise the place I felt like I used to be studying on the fly. Within the following article, I’ll deal with particular technical challenges that got here up within the course of, together with front-end efficiency, accessibility, and website positioning.
Earlier than we dive into the nitty-gritty, you could be questioning what makes WaterBear stand out among the many plethora of competing companies. Let’s discover out!
About WaterBear
WaterBear is a free platform bringing collectively inspiration and motion with award-winning high-production environmental documentaries overlaying varied matters, from animals and local weather change to individuals and communities. The WaterBear group produces their very own unique movies and documentaries and hosts curated movies and content material from varied high-profile companions, together with award-winning filmmakers, massive manufacturers, and important non-governmental organizations (NGOs), like Greenpeace, WWF, The Jane Goodall Institute, Ellen MacArthur Basis, Nikon, and plenty of others.
That is the place the worth proposition of different comparable companies would normally finish — customers binge-watching movies into perpetuity. WaterBear, nonetheless, takes a unique, extra aware strategy. Assume again to an impactful film or a documentary that moved you a lot that it left you feeling such as you wanted to do one thing in regards to the subject or concern you simply realized about. However perhaps you didn’t know the place to start or if it was even potential so that you can make any distinction.
WaterBear actively invitations and encourages customers to take part in some significant means. We would like individuals to be engaged within the concern by signing petitions, donating to a trigger, spreading the phrase, volunteering, or just altering their habits in a constructive means. Primarily, WaterBear goals to flip passive viewers into energetic and aware contributors by providing impactful content material with choices to be told on a problem and impressed to do one thing about it.
WaterBear and its work have been commonly featured in varied publications, and the platform is extremely praised and endorsed. And, hey, when you spot a familiar-looking tardigrade whereas strolling round London or some place else, ensure to snap an image and share it with me!
Defining Mission Targets
For context, I’m presently working at a software program growth firm known as Q Company primarily based in Zagreb, Croatia. We collaborated with WaterBear and its associate corporations to construct a revamped and redesigned model of the net and cellular app from the bottom up utilizing trendy applied sciences.
The WaterBear app was initially launched in December 2020, and the group realized so much in regards to the consumer expertise by gathering suggestions. This information was then used to create a recent new design and description some new options.
Whereas I’m unable to share particular information from that analysis effort, I can let you know that it led us to the next important targets:
Create a responsive internet app and cellular app utilizing a contemporary tech stack primarily based on the design offered by the WaterBear group.
Develop instruments that can enable the WaterBear group to simply create and customise touchdown pages for promotional campaigns and movies.
Establish potential efficiency bottlenecks and deal with them early on.
Construct dynamic, server-side generated sitemaps for improved website positioning.
Take heed to consumer suggestions to consistently iterate and implement new options.
The Technical Stack
Earlier than my group began working with WaterBear, the vast majority of the tech stack and infrastructure was set in stone, so we solely needed to determine on the front-end and cellular applied sciences we might use to construct it. We agreed to make use of the React-powered Subsequent.js framework for the net app and Flutter for cellular apps (i.e., Android and iOS). The work was break up between the 2 groups: the net app group and the cellular group.
Subsequent.js was our go-to alternative as a result of it allowed us to simply create dynamic server-side rendered sitemaps and use superior optimizations for photographs and JavaScript bundle that present choices for improved efficiency. We’ll cowl these matters in additional element within the subsequent article. For now, let’s spotlight the remaining integral components of the challenge:
Sanity CMS
An open-source headless content material administration system (CMS) that may be simply built-in with Subsequent.js and different front-end frameworks.
Firebase Authentication
A back-end service can authenticate customers by way of social media accounts, in addition to an ordinary e-mail and password.
Cloud Firestore
A versatile and scalable NoSQL cloud database for cellular and internet. This was a logical alternative for our database, as Firebase Authentication was required proper from the beginning.
Video.js
A flexible open-source video participant with customizable UI and plugin help.
Technique And Communication
Because the work started, we got here throughout our first hurdle. As you possibly can see from the earlier diagram, each internet and cellular apps needed to work together with the identical companies (together with the CMS, database, authentication, and so forth), so we additionally needed to guarantee constant conduct between them.
For instance, we would have liked to make sure that our CMS queries yielded the identical outcomes to the extent that movies appeared in the identical order on each the net and cellular apps and that length filters and sorting labored persistently.
We needed to do the identical with our Cloud Firestore occasion to maintain the database construction intact whereas being aware to jot down the proper worth sorts and skim the proper fields so they’re mapped to the construction. Every developer labored on their native occasion utilizing Firebase Native Emulator Suite to hurry up growth, so we had to make sure all the pieces was so as once we had been prepared to modify to staging and manufacturing databases.
It was essential to set up a collaborative environment between the 2 growth groups from the beginning, much more so contemplating we had been all working in a distant atmosphere. We made certain to keep up a correspondence both by way of fast video calls or Slack messages to share data and queries that we’d be utilizing.
As for the database, we saved an in depth diagram of our database construction and worth sorts in an effort to remove all doubt and guarantee each apps work together with the database identically. This served as our single supply of reality and was made available to the groups for reference in any respect phases of growth.
These methods proved surprisingly extra helpful than we anticipated, as they allowed us to rapidly and safely swap from the emulator to the staging and manufacturing database with none hiccups. As a bonus, it resulted in fewer bugs that originated from the interaction between the net and cellular functions.
My takeaway from this expertise: It’s very important to maintain the communication channels open to collaborate, focus on challenges, and share data in regards to the integrations and options each of our groups needed to implement. It’s additionally worthwhile investing some additional time and care into sustaining essential challenge documentation and diagrams. Having data available in a handy format can save time and clear any doubts throughout growth. Not solely that, this documentation may even find yourself being a fantastic onboarding information for brand new group members sooner or later.
What I Realized As A First-Time Lead Developer
As I’ve talked about earlier than, this was my first gig as a lead developer. Builders are normally thrust into this form of function in some unspecified time in the future of their careers. Aside from that, there may be normally little or no preparation or coaching for it — we have now to study rapidly and adapt on the fly primarily based on our personal experiences as builders.
The day-to-day growth work on my group will get a bit managerial because of this. As a lead developer, I’m liable for the work the group does, supporting and mentoring particular person group members, and advocating for the group’s priorities. I used to be additionally extra immediately concerned with planning and speaking with shoppers and stakeholders. For me, it was a lot of added duty that might really feel overwhelming at varied instances.
I made a decision to strategy the function thoughtfully by setting guidelines and guiding rules for myself, versus placing the brand new duties apart and focusing totally on growth work. What are these guidelines and rules? Let’s focus on them one by one.
Main By Instance And Mentoring On The Fly
First, I wished to make sure that my group was producing constant code high quality throughout the board, with a precedence on efficiency, accessibility, website positioning, and value. I prefer to refer to those as The 4 Pillars of high quality growth.
In my very own expertise, it’s simpler to comply with present, well-established, and documented footsteps. That’s the place The 4 Pillars served a big function on our group, as they had been emphasised throughout our group check-ins, demos, and opinions. Furthermore, I set these expectations by way of my very own pull requests (PR) by asking the group to evaluate my work alongside these rules.
On the very begin of the challenge, I requested my group to scaffold the challenge and full fundamental integration duties that could possibly be accomplished by following present documentation. In the meantime, that allowed me to chart the trail ahead by engaged on a set of characteristic duties that established the inspiration of The 4 Pillars, then asking my group to evaluate PRs to set expectations for the standard I used to be pursuing for the challenge. This fashion, they’d quantity of hands-on expertise abiding by the rules, and I used to be capable of lead that by instance. My group ought to anticipate the identical degree of high quality from me that I anticipate of them.
The opposite advantage of this strategy is that it allowed me to mentor the group on the fly. I may share sources and documentation supporting my work within the PRs, and the group may develop their very own data and understanding by requesting adjustments to my work. In different phrases, I managed to seamlessly introduce the group to new ideas.
My takeaway from this expertise: Use each alternative to share your data with the group, even when it’s on the fly! And help the group’s studying journey by setting good examples which might be aligned with well-defined expectations.
Appearing As The Tiebreaker
As a part of my very own introduction to the function of lead developer, I picked up Alex MacCaw’s ebook The Supervisor’s Handbook, and it helped me overcome one other attention-grabbing scenario that got here up in the course of the challenge: performing as a tiebreaker when making selections.
Early within the challenge, we had a gathering with the cellular group about our shared database structure. Some group members proposed a considerably radical strategy to how you can construction a really essential a part of our database. It didn’t sit nicely with me and different group members because it wasn’t documented or talked about wherever else and wasn’t the usual apply inside the firm. We’d additionally need to decide to this strategy, and it might have price us so much if we hit a roadblock and needed to roll again our work. The one factor we needed to go on was a fundamental small-scale proof of idea — removed from what we would have liked to do the work — however the group members who got here up with the thought had been adamant in regards to the proposal.
It was my name to make, and it was this particular recommendation from The Supervisor’s Handbook that got here in useful at simply the suitable time:
“Don’t let individuals strain you into selections you don’t consider in. They’ll maintain you liable for them later, they usually’ll be proper. Selections are your duty.”
I made a decision to step again a bit and define the potential dangers and rewards of the proposed strategy. It sounds so easy, but it surely allowed me to realize a greater grasp on the talk and formulate my very own conclusion that it wasn’t price journeying into the unknown.
I made my remaining determination and defined my reasoning to the group at our subsequent inner assembly. I made certain to give props to the group members who got here up with the progressive thought as a result of it’s essential to keep up an inclusive environment the place everybody feels heard and free to discover new concepts.
Rejecting or suspending an thought shouldn’t be seen as a unfavourable end result however as part of the larger image of constructing a high-quality product, which was, after all, our major aim.
Study To Say “No” And Supply A Compromise
What I didn’t point out in that final story is that I supplied the group members who got here up with the progressive database construction a compromise by suggesting they current that concept to their group lead and discover its potential in a devoted take a look at challenge.
The identical precept applies when speaking with shoppers and stakeholders. It’s widespread for shoppers to give you concepts and options in the course of the challenge timeline, which comes with the territory of tasks utilizing an Agile methodology. Nonetheless, you continue to need to keep away from overcommitting and pushing the group to its limits, and particularly forestall your self from carrying the burden of all the additional work your self.
I’ve realized {that a} lead developer acts as an advocate for the group. Meaning figuring out when to say “no” to requests, significantly those who may make your group’s work noticeably troublesome or demanding.
Saying “no” might sound chilly or come throughout as a unfavourable response as a result of it successfully places a lid on the dialogue. Nonetheless, you possibly can at all times acknowledge the suggestion and provide a compromise that each events can agree on.
Listed here are some actual examples of how I used to be capable of say “no” to an thought whereas providing a compromise:
Lowering the scope
“We’d not be capable to do X, Y, and Z and end them in time to satisfy our deadlines. That mentioned, we solely want X at this stage, and maybe we will postpone Y and Z within the subsequent part.”
Suspending
“We will’t spare the time for X at this stage, but it surely’s a fantastic suggestion, and we must always make observe of it regardless that we have to postpone it.”
Switching priorities
“If X is a excessive precedence and must be executed this dash, can we postpone a decrease precedence process in order that we’re capable of dedicate sufficient time on this dash to complete it in time?”
Rebecca Knight shares some nice rules and sensible examples which have resonated with me relating to saying “no”:
DoConsider whether or not you’ve got the will and the bandwidth to assist with the request and ask if priorities may be shifted or trade-offs made.Present a willingness to pitch in by inquiring if there are small methods you may be useful to the challenge.Observe saying no out loud. Ultimately, it can turn into simpler.
Don’tUse a harsh or hesitant tone, and don’t be overly well mannered both. As an alternative, attempt for a gradual and clear no.Maintain again the true purpose you’re saying no. To restrict frustration, give causes with good weight up entrance.Distort your message or act tentatively since you’re attempting to maintain your colleague pleased. Be trustworthy and ensure your no is known.
Be Thoughtful And Talk Clearly
This goes hand-in-hand with all of the earlier factors I’ve made, and also you would possibly assume it goes with out saying. Nonetheless, I need to spotlight the significance of embedding empathy and thoughtful conduct in a group.
Constructing and sustaining mutual belief inside a group is essential. Each time we had inner conferences to debate the duties for a present dash, I made certain to go over every characteristic, clear any doubts and blockers, and make sure whether or not anybody had any considerations about their assigned duties. Somebody may need little to no expertise with the service they’re integrating, they usually would possibly really feel not sure whether or not they’re capable of full the duty. Or they might have a scheduled physician appointment in the course of the dash that threatens to delay their work and requires your help.
Workforce members ought to be at liberty to talk up and share their considerations, issues, and opinions with out judgment and repercussions. This lets you plan, adapt, and remedy issues early on and ease any stress and frustration a group member would possibly really feel if their progress will get stalled.
Coming Up Subsequent
On this article, I mentioned the small print of WaterBear, a big challenge that gives a free platform for documentaries that purpose to tell viewers about points and encourage them to take motion. I took on the challenge as a first-time lead developer at Q Company and shared the challenges I confronted all through the challenge. Particularly, I targeted on what I realized about growing and fostering a productive and collaborative group atmosphere and the precise approaches I took to set expectations, lead by instance, and talk with empathy and inclusiveness.
We mentioned the technique round defining goals and the technical stack used to construct the challenge. I’ll go over that in a lot higher element within the concluding article of this two-part sequence.
Please take a look at WaterBear on the internet, Android, and iOS, and share with us your favourite documentaries! I’d additionally love so that you can take a look at this glorious post-launch interview with WaterBear CEO Sam Sutaria. He affords a bunch of extra insights on our work from the consumer’s perspective.
References
The Supervisor’s Handbook, Alex MacCaw
“How one can Say No to Taking over Extra Work,” Rebecca Knight
Many due to WaterBear and Q Company for serving to out with this text and making it potential. I actually wouldn’t have executed this with out their help. I might additionally prefer to commend everybody who labored on the challenge for his or her excellent work! You may have taught me a lot up to now, and I’m grateful for it.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!