After you have launched the simulator, go back to yoursandbox dashboardand create a channel. A channel will help us to run our implementation. A channel will constitute a Service Code and Callback URL.
A Service Code is the USSD code that we are going to type on our simulator and it will call the callback url upon hitting send. You can imagine a situation whereby someone is checking their balance. For instance, they will enter *144# and hit send. The *144# is a Service Code. Upon hitting send, a callback URL will be called, the URL endpoint will help to carry out the needed operations which will be to determine the actual calculation of the balance and return the results.
How to create a channel
Under the USSD menu in your sandbox dashboard click Create Channel.
To create a channel you will need a callback URL. A callback URL will be called when a user sends a request using a service code.
Download and unzipngrok which will help us to access our localhost server through the internet.
After downloading thengrok open a terminal window and navigate to the directory where you downloaded the setup.
Copy the command shown in the above screenshot and enter it in the terminal. Note: The above command should be run int the directory where you downloaded thengrok
Run ./ngrok HTTP 3000 to start an HTTP tunnel to our localhost on port 3000. You will be able to see something like shown below.
Paste the link in the callback URL field and input a channel of your choice and if the channel is not available you will get a suggestion as shown in the image below.
We should have something as shown below in our USSD — Service Codes.
Now that we have a channel fully configured we can start writing code.
Initialize a node application via yarn init or npm init
Install express, nodemon, body-parser and Africa’s Talking dependencies via yarn add expressnodemon Africa’s Talking body-parser or npm install express Africa’s Talking nodemon body-parser -— save
In the root directory (current directory) of the app, create a file named index.js and add the following code into the file.
Create another file in the root of your project and name it app.js and add the following code into the file.
Modify your package.json file to include a script to run the app. The file should then look something like below.
In your root folder via the terminal type yarn start or npm start to start the app.
Head to our simulator and choose the USSD option.
Dial USSD — Service Code in the simulator which we generated earlier. For my case it is *384*77255#
The following screenshots show the results after dialing the USSD code.
Feel free to play around with the options provided. This means that our USSD app if fully functional.
Perhaps in another life, Urban Ishimwe might have been some famous Social Media Influencer helping brands connect their products with their users. Today, though, he is at Andela Kigali, opting instead to build a career in software engineering. He may yet go on to connect brands and users, but he will also build products that people use.
Urban worked for four months as a table dealer at a Casino only a year ago. He now works as a software engineer, while taking weekend classes at the University of Kigali towards a Computer Science degree.
“I started coding when I was in high school in 2016 because I was studying computer science. I used to learn from online resources like youtube, javatpoint, and freeCodeCamp. I’ve also done many programming workshops, Which helped me to dive deeper into programming. First of all, I like coding. My friends/colleagues used to encourage me to become a software developer when they were looking at my projects. And during that whole time. I felt a passion for doing what am good at.”
Software engineers at Andela work on engineering teams with Andela’s Partner companies across the globe. Maybe Urban will still go on to be a top social media influencer. He speaks fondly about a friend of his with whom he was going to build a social media empire with. “We used to talk about how we’re going to make a youtube channel and an Instagram account, which we believed was going to become very popular. that guy was really good at video editing, and I’m really good at creating content and posing in pictures.”
Maybe he will be a top model too. What is more apparent, giving his commitments at the moment, is that he is well on his way to being a top software engineer.
When I first started programming, I really had no idea what abstract programming concepts like design patterns or file structures were or why they were so important until I wrote my first application for a hotel. The application was to help the hotel print receipts for their respective customers. A year later, I was asked by the hotel management to implement some new features for the application. Unfortunately, I ended up having to rewrite the whole application from scratch because I had initially structured the application so poorly, it resembled the windows mine-sweeper game I played when I was younger. Any small step would lead to a blow-up. This happened again when I got called to introduce more features and after two re-writes, I abandoned supporting the project. I paid someone else to rewrite it for the hotel. Nowadays, I look back at the previously implemented code with complete disdain and regret putting the client in such a bad position.
Introduction
Firstly, I would like to give a shout out to Brad Frost for introducing the Atomic Design principles. It honestly changed my coding journey by making me see problem-solving in a more holistic manner.
The aim of the article is to help people understand and discover a different way to structure our frontend applications. Atomic design is a concept of breaking user interfaces into smaller simpler elements which ultimately helps to create more consistent UI with better maintainability.
Componentization in React
I think one of the exciting concepts that React has brought into the eco-system is componentization. However, in a lot of React projects I have viewed, a lot of developers fail to take full advantage of this concept and repeatedly violate the DRY principle. This is possibly due to the absence of standard best practices for design patterns in the React Docs as most codebases are built upon the opinions of the individuals contributing to it. The React Docs do, however, recommend composition with a really good example that demonstrates different levels of component specialization.
These concepts can be applied to most frontend frameworks but I chose React as that is what I am most comfortable with (I am also aware Facebook calls it a UI library, but it’s a discussion for another article).
React does(Docs)also recommend a design-first approach for frontend development – In this approach, a UI/UX designer team would come up with mocks for the developer team to implement, The team can now go about breaking the UI mocks down into a component hierarchy. Breaking down components based on some sort of hierarchy is one of the foundations when implementing Atomic design. Atoms, Molecules, Organisms, Templates, and Pages help build the hierarchy.
But Why Atomic Design?
When I first started using this methodology, it was with a large React Single Page Application (SPA). We had a lot of custom components to create and this wasn’t a solution we could find when looking at present CSS frameworks and libraries. So the result was having to create these components by building them with HTML elements and using custom CSS. The concept of having one location with all the components was actually quite interesting and it actually led to faster development times.
By borrowing this terminology from Chemistry, Brad Frost introducing the Atomic Design concept and utilizing it with UI components makes sense. As the building blocks of websites are HTML elements and just like atoms these elements are combined together to form the complex pages. Each page designed by developers can be broken down into it’s smaller constituent components, similar to what is taught in Chemistry with molecules and organisms.
Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.
Atoms are the smallest possible components, such as buttons, titles, inputs, text. Atoms of our interfaces serve as the foundational building blocks of our components and can’t be broken down any further without ceasing to be functional. Molecules as they are named consist of two or more atoms, molecules are relatively simple groups of UI elements functioning together as a unit. Examples are A Textfield comprising of an HTML textInput, a label, and an error message or a search Box comprising of an HTML TextInput and a Button. Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
Templates place components within a layout and demonstrate the design’s underlying content structure. They are basically a skeletal structure of what the page would look like without the components of the page. Pages are specific instances of templates that show what a UI looks like with real representative content in place. Templates and Pages (pages are just instances of templates) also contain organisms, molecules, and atoms. The joining together of these smaller components makes up our user interfaces in our applications.
Folder structure
So using the components discussed earlier, we can flesh out a starting folder structure for an imaginary codebase. Remember the folder positions could vary across codebases but it is vital to discuss this with your team before implementing. In the screenshot above, I have a Components folder to house all our components used on the frontend, I have a UI folder to separate my smaller design components from the page-level structures.
I guess one of the recurring questions I got from other members of my team was what to do with components that use an internal state since this state could be reliant on the value of business logic supplied to it. It is important to distinguish this internal state from the business logic of your React application. A good example is the open and closed state of a dropdown button, this is a good example of an internal state of a component. With this approach, our components are basically like dummy components which are only updated depending on the props you update the components with.
Benefits
Components can be developed separately from the application, tested and viewed on tools like a style guide before importing them into your application. This also means there is no over-reliance on back-end application logic for starting front-end development.
Once a set of patterns has been established, we can have a faster build process, with more flexibility in case a change needs to be made to the designs. Designs can be more consistent since we are re-using a lot of existing components.
This pattern also helps us manage our CSS a lot better since our CSS is tied to specific components. So depending on the architecture of your application you should only render the CSS utilized by the components rendered.
Cons
Media queries do become a bit harder as when components in isolation you have no way to determine the size of parent containers. Components have no knowledge of their width so resizes happen in response to changes to the actual page sizes.
This solution can be remedied by introducing layout components that would surround your components and resize them accordingly. These layout components would implement CSS layout properties like flex, grid, etc.
Finishing Up
At the moment, from our screenshots above, we just have our app existing just with its components. What we need is a reliable way to bring in our business logic to update these components. I think it is good practice to keep your business logic away from your views (separation of concerns). This way it is easier to debug problems with code especially when your project starts to expand. We can achieve this by adopting different approaches. I personally like to use Higher-order components(HOC) and populate the pages with any state using props to the specific page. This state could be a series of API calls shared around the application. Other solutions could involve the render props pattern or react-hooks.
A more abstract explanation of this is could be to imagine your components were empty bottles of the same color and size as the image below. You decided to fill each bottle liquid of a different color. This could be likened to you updating your state of different components but in case your state is the liquid and the bottle is your component. Filling each empty bottle with a different color of liquid would be a more straightforward process and if for any reason you need to update the state by changing the color, it would be a much easier process.
However, If I decided to have my bottles half-filled with a red color liquid and then decided halfway that I wanted to fill it up with a different color then I would have a bit of an issue. What if they don’t mix? Or What if I had to remove the original color and replace it with a different color ?. This is exactly the scenario that happens when you have a view already implementing business logic, it makes it harder in the future to refactor code and also harder to re-use the view
Components updated with their state.
Here is what I came up with…
Folder structure
Even though React is unopinionated it recommended you limit yourself to a maximum of three or four nested folders within a single project. However, you do have alias built into both jest, webpack, and babel to help resolve relative imports so your imports don’t look overly clunky.
For lovers of Redux , there is this lovely article by Katia Wheeler that should set you on your way. It is located in the references.
The last weekend of October 2019 saw Andela and the Blacktocats, GitHub’s black employee resource group, host the Codenaija Hackathon which is arguably the biggest hackathon event of the year in Nigeria. An alignment in Andela’s mission to advance human potential and Blacktocats mission of empowering black lives in tech is what informed the decision to power a hackathon event of this magnitude.
Senior Technical Program Manager, Andela.
The Nigerian tech ecosystem is growing exponentially and GitHub’s 2018 Octoverse report positions Nigeria at fourth place worldwide, in regards to new users and fastest-growing repositories, validating this statement.
The 2019 report which highlights the growth of Nigerian engineers birthed the need for a 2-day hackathon to help spotlight the community of brilliant engineers by showcasing their talent and work. To drive this, getting tech brands like Microsoft and Flutterwave — whose dreams for the ecosystem aligns with ours — to sponsor, was important. It was also important to not only celebrate these engineers but also get them to build something meaningful which is what informed the theme of the hackathon, “Building Tech for Social Good”.
Call For Applications
A call for applications was leveraged across several media channels and, in less than a week, we got over 800 applications from junior, mid-level and senior software engineers across Nigeria. A mix of 100 junior, mid-level, and senior engineers was selected to participate at the hackathon.
The hackathon experience started with a webinar for the selected participants, 5 days to the event day. The webinar was coordinated by Andela’s Developer Relations Manager, Mercy Orangi and GitHub’s Associate Program Manager, Arelia Jones. The webinar focused on demystifying the theme of the hackathon, as well as manage the expectations of the engineers for the event.
Day 1
The buses had just conveyed some of the participants to the hackathon venue and the desire to build something that actually tackles a social problem was easily noticeable from the expressions of the engineers. As they registered and walked into the room, brilliance, passion and a thirst to leave a mark were all that exuded from these young men and women.
The event kicked off with representatives from Andela and GitHub giving opening remarks, talking about the “WHY” to powering the Codenaija 2019 hackathon and their reasons for selecting Nigeria as their pilot location.
The Keynote Session on “The Digital Divide”
Andela Nigeria’s Country Director, Omowale David-Ashiru
Omowale spoke at length about the digital divide in a very engaging session and highlighted some sectors in Nigeria that have been most affected by this problem. She went further to buttress critical next steps to solving these issues using technology. Here are some quotes from here session;
“Changing the world is not just a cliche tossed around by techies anymore. The world is already changing. Techies, artists & entertainers are already getting more recognition and are forming part of the larger conversations at a national level.” – Omowale David-Ashiru
“The traditional modes of education are inefficient and won’t scale when we factor in out-of-school kids. Technology takes education from the classrooms to where people are.” – Omowale David-Ashiru.
The Open Source Conversations
Sharing unique experiences
Arelia Jones, Associate Program Manager at GitHub
Associate Program Manager at GitHub, Arelia Jones, kicked this session off. She gave some brief info about GitHub and then spoke about the values of Open Source. We had other speakers such as Samson Goddy talk about his work at Open Source Community Africa, followed by the creator of “Download This Video & Remind Me of This Tweet”, Shalvah Adebayo, who spoke about his experience with open source projects. Adewale Abati, a developer advocate at Flutterwave ended this session by sharing his own unique experiences working on open source projects.
A Hackathon on Steroids
16 teams, 16 solutions, 16 winners.
The first 3 hours of the first day was spent on introductions, presentations and lightning talks. At this point, participants were all primed and ready to get to the action of hacking. Thirteen teams were created from the +40 selected engineers who applied to compete at the hackathon. Three extra teams were created out of the 14 brilliant Andelan engineers who had applied, not to compete, but to build a product for social good.
The strong display of collaboration from various teams within the first hour of hacking was reminiscent of Frodo and Samwise from Peter Jackson’s film adaptation of J.R.R. Tolkien’s Lord of the Rings trilogy. From wireframes to mockups, teams got their light bulb moments and moved straight into building their Minimum Viable Product (MVP) to at least show the judges how their product would work.
At 10:00 am the next day, the energy and excitement level had increased, it was palpable.
An Overview of the Top 5 Presented Solutions From Competing Teams
Winners — Team 8
Application: SmartCam – Cassava
Problem Statement:
Nigeria’s cassava production accounts for 20% of the total global output but only 1% is being exported. Cassava farmers are constantly faced with the challenge of dealing with a number of infestation and crop diseases that stunts growth and lowers general productivity (harvest yield).
Solution Statement “SmartCam – Cassava” is an offline mobile app that serves as an AI detector to help farmers detect early cassava disease infestation and proffer the next course of action.
First Runner-Up —- Team 2 aka Knights of Code
Application Name: ReachAid
Problem Statement:
Anything being sold to the average Nigerian is directly competing with food. Basic needs that enhance the standard of living are not available to most. On the flip side, others have excess and no means to give out.
Solution Statement:
ReachAid is a platform that connects those who are in need of the items they need while considering security and ease of accessibility for both parties.
Second Runner Up — Team 9
Application Name: Live Track
Problem Statement:
Anxiety, worry and despair when you can’t reach a loved one. Inability to be certain about the location of loved ones or employees.
Solution Statement: An app that tracks real-time location, sends distress messages in cases of accidents, physical violence or assault. It is in-built with a location-based real-time crisis alert.
Third Runner Up — Team 7 aka Ace
Application Name: CardShare
Problem Statement
Paper waste
Little or no platform for designers to contribute to open source
The increasing rate of social anxiety.
Solution Statement Get greeting/gift cards fully digital with a similar emotion-filled experience
Designers and Developers can contribute via GitHub and the platform. They are also open to the option to earn money on the platform
Create unique cards to address certain issues like depression, gender inequality e.t.c.
Fourth Runner Up —- Team 4 aka TrippleNT
Application Name: EduFund
Problem Statement
Uneducated youths in Nigeria has increased from 5.19million in 1991 to 9.43million in 2015
Poor funding is one of the factors that contribute to low-quality education in Nigeria.
Poor infrastructure and training facilities: In northeast Nigeria, about 496 classrooms have been destroyed
Solution Statement :
A crowdfunding platform where spare change is aggregated and used for social good.
Funds will be used to help children that are out of school or have no access to free and quality education. It can also be used for the renovation of schools and acquiring quality training facilities.
An Overview of the Amazing Solutions Presented by Andelans
Here are solutions from Andelan engineers who volunteered to build for social good and recused themselves from competing for the prizes.
Team 1
Application Name: The Scofield Project
Problem Statements:
Justice for the unlawfully imprisoned
There are over 70000 prisoners in Nigeria
69% of them are awaiting trial
1.7% are juveniles
many are illegally detained
Benefits
Experience for young lawyers
Freedom for deserving individuals
Awareness of the deplorable situation of the Nigerian justice system and prisons.
Police accountability
Rehabilitation for prisoners
Reuniting families
Future Releases
Donations (cash and kind)
Celebrate lawyers & wins
Document Prison records
In-app Cash disbursement for each case
Team 2
Application Name: BloodHub
Problem Statements:
Getting matching blood for loved ones during an emergency could sometimes be difficult and expensive(could lead to loss of life).
The fact that some hospitals don’t have the infrastructure to bank blood
Solution Statement
BloodHub is an app that enables those in an immediate need of blood to get seamlessly connected to donors with matching blood groups within the requester’s location. BloodHub helps solve the blood banking problems of these hospitals by connecting potential blood donors to those in need through those hospitals.
Team 3
Application Name: Jamii
Problem Statement:
Lack of a platform that brings people together to solve some common communal problems they are facing which could be solved without involving/waiting for the government.
Solution Statement: An app that:
Brings people together to solve a common communal problem they face. This includes but not limited to fixing potholes on roads, volunteering to teach at a secondary/primary during holidays or even coming together to clean up a blocked gutter/drainage.
Allows companies to create and sponsor CSR events.
Encourages people to participate in community development and be a better citizen
Awards point for participating in events and recognizes individual contributions
Omotayo Madein has been working as a distributed member of the publishing Team at Pluto TV — an Andela Partner Company — since April 2018. She joined Andela a month before that as a Senior Software Engineer after earning a B.Sc. in Software Engineering from the American University of Nigeria and an M.Sc. in Human-Computer Interaction (HCI) from the University of Birmingham, United Kingdom. She is a first-rate technologist, as is typified by her passion and work.
Pluto TV provides free streaming television service to millions of viewers each month in America and Europe. Via its partnership with major TV networks, movie studios, publishers, and digital media companies, Pluto TV is delivering 200+ live and original channels and thousands of on-demand movies to its ever-growing audience.
Omotayo’s team builds products that are used internally to curate or program videos, on-demand content, and channels, ingest content from Pluto TV’s partners and ensure quality control in what is shared with users.
Wielding Remote Work
As an engineer working from Lagos whose work serves millions of people half a world away, Omotayo, like all of Andela’s software engineers, is a remote hero. As part of a distributed team spread across multiple timezones, timely communication and feedback are cornerstones of her work process, to ensure that expectations are met.
“We typically work in 2-week sprints on my team, in which each engineer is assigned 2 or more tasks depending on the complexity. Our tasks are generated based on feature requests from our users and the company road map, there are often bug fixes and spikes for every sprint too.”
How She Works:
Working on a product that millions of people use demands that efficient processes and structures are put in place. Top software engineers have a method to their work, which helps them deliver their best in every scenario.
“When working on a new task, I often plan my approach to the problem by writing out a to-do list in my editor and then list expand on what must be done to complete the list. During this process, I often learn about or experiment with new approaches and I finally implement the most efficient. I often reach out to my team members or colleagues if I feel stuck or need a second opinion on my tasks. On really challenging tasks, I try to do a personal retrospective just to ensure that what I learned during the process stays with me.”
Pluto TV is available on all mobile, web and connected TV streaming devices, and it’s a top free app used by millions of viewers each month to watch premium news, TV shows, movies, sports, lifestyle, and trending digital series. Optimization feature requests are quite common for Omotayo’s team and it is their job to ensure that users have a great experience using the product, regardless of the device they use or where they are within the regions that Pluto TV serves.
We have launched the #GrowWithAndela campaign this month to shed more light on the nature of work software engineers do at Andela. A survey we conducted over the last few weeks showed that the following factors polled highest among engineers when choosing where to work:
1. Professional growth and Learning: They want jobs that assure that they continue to learn and grow as they work. 2. Interesting & Diverse Problems to Solve: The chance to work on projects that are worthwhile — they are both challenging and exciting, as well as impactful. 3. Flexible and Remote Work: Real estate and geography shouldn’t get in the way of how you work. Where work is done from is not as important as actually getting the work done. 4. Competitive Pay & Benefits: Being properly compensated for work done is a metric that polls well across the board, and rightly so. 5. Fun Culture + Elite Engineering Team: Because people spend more time at work and around colleagues (physically or remotely) than they do anywhere else, work culture and the kind of colleagues matter a great deal.
With the #GrowWithAndela campaign, we’re keen on showcasing the Andela experience to software engineers across the continent. The factors listed above all play into our value propositions as a company. Some of the best engineers on the continent work at Andela, and are masters of remote and distributed work. Also, Andela consistently polls well among the best places to work in Africa. [See our updated engineering framework.]
Over the coming weeks, we will be hosting Remote Heroes events across all our locations. These events will bring together tech industry leaders and senior software engineers to discuss the evolving nature and future of work. Some of our engineers will also speak on the work they do and the impact they’re making.
To register to attend a Remote Heroes event, please visit the campaign page to confirm when we’re hosting one in a city near you. Follow updates on the campaign on our Social Media accounts.
Qn: Is writing JavaScript using the out-of-the-box functions any restricting?
To start off this few minutes’ journey, which will be more of an adventure and discovery, we’ll deeply look into some of the commonly used out-of-the-box features that Javascript has. Do they enhance the efficiency of code or; would rather write a traditional for loop versus an out-of-the-box-feature function to suit their respective requirements? Reading this will get you asking yourself questions like, “why do we even have to get close to re-inventing the wheel? The for loop has no place in the modern-day Javascript development edge. Since ES5 was released, great new array functions were introduced to our dear JavaScript.” Oh yes! Phew, I may be right or wrong about imagining that you asked yourself that question, nonetheless, I have asked myself the same question and many others countless times. This has happened mostly when I’ve had to traverse through a big array of data before displaying it and I needed to select the iteration approach to employ.
The usage of loops is very common in software development, but as developers, we need to remember about proper implementation and avoiding nesting loops because it has a bad impact on the overall system performance. An example of a nested for loop is shown below;
for (let y = 0; y < 2; y++){
for (let x = 4; x < 6; x++){
console.log(x, y);}
}
Also, in the case of a sister loop, the while loop, it’s important to pay attention to the condition which needs to be false at some point to not break the code or increase possible downtime of the application.
There are different ways to loop and iterate in JavaScript. Listing just a few; for, for…of, for…in, while, while and continue, and other out-of-the-box-feature methods which are similar to loops/iterators like arr.forEach, arr.values(), arr.keys(), arr.map(), arr.reducer(), etc.
We’ll use a case study of comparing forEach() function and the traditional for loop in Javascript when traversing an array. I’m using a Mac OS and Chrome for this illustration.
The Gist
But What Are Loops? For better context, Loops play an essential role in software development, and they are used to iterate through arrays or other elements that are iterable. e.g Sets, Maps, Strings, etc.
Understanding and testing execution time for the for loop.
These three simple syntactic flavors are to help shed more light upon the quick syntax while using the for loop.
for (initialize; condition; increment);
for (initialize; condition; increment) single statement;
for (initialize; condition; increment) { multiple; statements; }
Open a javascript file in your preferred editor and name it forLoop.js. At this point, ensure that you have NodeJs installed. Please run this code with this command `node forLoop.js`. Just take note of the time difference displayed in the console. We’ll use it for comparison shortly. When I run it, this is what I get below;
// for loop
var counter = 1000;
var t0 = Date.now();
for (let i = 0; i < counter; i++) {
console.log('This is a for loop');
}
var t1 = Date.now();
console.log('for loop…time ' + (t1 - t0) + ' milliseconds.');
This is what is printed in the console after looping a thousand items using the for loop
Understanding and testing the execution time for a simple forEach loop
The forEach is an Array method that we can use to execute a function on each element in an array. It’s a good example of an out-of-the-box function/feature. It can only be used on Arrays, Maps, and Sets. When using forEach, we simply have to specify a callback function. forEach calls a callback function once for each element present in the array, in ascending order. Given an array arr; the forEach syntax is shown below. For more details please visit here.
Open a Javascript file in your preferred editor and name it forEachLoop.js. Please run this code with this command, node forEachLoop.js. Just take note of the time difference displayed in the console. As you can see in the code snippet below, the forEach() method also iterates through an array, but here we don’t specify a condition or updater, here we iterate through the given array, and we can return every item.
// forEach function
var array = Array.from(Array(1000).keys(), n => n + 1);
var t0 = Date.now();
array.forEach((item, index) => {
console.log('This is the forEach loop');
});
var t1 = Date.now();
console.log('forEach()…time ' + (t1 - t0) + ' milliseconds.');
This is what is printed in the console after running the code above
You realize that forEach has a higher execution time on average of 10 runs. The time may differ each time you run the code, but the for loop average execution time after ten times is shorter. This implies that the traditional for loop will traverse an array with 1000 items in a much shorter time for a large number of requests from multiple users.
More comparison of the two array iterations in the chrome browser.
I continued to test both loops in a testing environment like the Google Chrome browser that runs several web applications with over 62.41% browser market share globally.
I used snippets which are quick scripts that you can run on any page and have access to the page’s Javascript context. If you’re using Firefox, look out for Scratchpad. Using Snippets to help run both loops and display the respective time variations. Since chrome snippets provide a better testing environment, we are sure of a more realistic comparison.
Please copy the same code you used earlier in the editor of your choice and create two files that you’ll run and note the time differences. For emphasis, copy the code in the file named forEachLoop.js into a new snippet titled forEach.js. Also, copy the code in the editor file named forLoop.js into your new snippet titled forLoop.js. Note down the time difference after running each of the files respectively.
Below is a gif to illustrate the time variations between the two loops.
Quick Analysis of the Execution time for the two loops.
Quick Analysis on the average time between the two loops
Explanation
How can the newest and recommended solution make JavaScript so much slower? The cause of this pain comes from two main reasons, forEach and other functions like reduce() require a call-back function to be executed which is called recursively and bloats the stack, and additional operation and verification which are made over the executed code. For more details visit here and search for forEach or reduce.
Which One Should You Use?
The traditional forloop is the fastest, so you should always use that right? No, because fast performance is not the only thing that matters. It is rare that you will ever need to loop over 1 million items in a frontend JS app at a go. Code Readability is usually more important, so default to the style that fits your application. If you prefer to write functional code, then forEach is ideal, while for-of is great otherwise. Fewer lines of code mean shorter development times and less maintenance overhead — optimize for developer-happiness first, then performance later.
Well, one may argue that at the end of the day, they’re relatively similar performance-wise. The only difference is your personal preference and some small case-by-case situations that may evolve later. I would say that don’t get too hung up on how you reach your solution. As long as you can solve the problem at hand, and also have a deeper insight like one you’ve just gained now into rightly applying out-of-the-box features versus the traditional loops, then you are better placed to know when and where to re-visit when you need to optimize performance with respect to the kind of application requirements and constraints present. This kind of insight is what every developer needs to have.
Lastly, for a small application, writing fast and more readable code is perfect — but for stressed servers and huge client-side applications, this might not be the best practice. In conclusion and to answer the question, “Is writing JavaScript using the out-of-the-box features any restricting”, I would say yes. But having deeper insight as you have just gained helps to curb all the restrictions.
Extra Tip
QN? What’s the preferred way to loop through objects in javascript? Objects not Arrays.
Oh yes, Javascript provides ways to loop over a set of objects as well. Plain objects aren’t iterable. The safe or easier way to iterate over properties is via a tool function like via objectEntries().
Illustrating this using for-in & for-of tricks. Just open a javascript file in your preferred editor and call it loop.js. Please run this code with node loop.js.
For-in_loop
for-in_Continued
The result looks like this below.
// Use a For-In Loop
const equine = { horse: '', zebra: '', unicorn: ''}
for (const key in equine) {
if (equine.hasOwnProperty(key)) {
console.log('>',equine[key]);
}
}
// Unwrap the the Values
for (const val of Object.values(equine)) {
console.log('1',val);
}
// Create a Map
const equineq = new Map(Object.entries(equine));
for (const v of equineq.values()) {
console.log('2',v)
}
Juntos builds financial tools that help financial institutions create deeply loyal digital relationships — at scale — with their customers. Juntos is big on financial inclusion; their product serves low-income consumers who are engaging with financial institutions for the first time. They provide support with services like banking, loans, etc, by partnering with the institutions to engage them in warm, automated, two-way mobile conversations designed to build digital relationships and empower individuals to take control of their financial lives and achieve their dreams. These conversations have helped millions of people gain confidence in their financial journeys and trust in the institutions that serve them.
The company was founded in 2010 by Benjamin Knelman, Dante Cassanego, and Katie Nienow out of the Stanford Design School, with a mission to build digital mobile tools that create financial stability for low-income consumers. Their product serves both targets (the financial institutions and the consumers) really well by increasing account activity, boosting deposits, and creating the foundation of financial security.
Juntos has been an Andela Partner company since March 1, 2018.
Remote Hero Spotlight: Donna Mwiine
Judging by her fascination with drawing and Microsoft Paint in her childhood, Donna Mwiine might very well have become an artist. Today, she works as a software engineer at Andela, as a distributed member of the Juntos Global engineering team.
Donna Mwiine works from Kampala, as part of the Galapagos Engineering team at Juntos. Galapagos is the dashboard that lets Juntos partners get visibility on the interactions between Juntos and their customers. The dashboard offers actionable insights on customers’ needs and pain points and helps Juntos achieve its vision of building meaningful relationships between financial institutions and their customers. Donna has been working as a member of the team for 1 year and 9 months. To get a better sense of how Juntos’ product works, take a look at their solutions page.
Wielding Remote & Distributed Work
Donna codes in Ruby/Ruby on Rails. When I asked her about her work process, given that she works remotely from Kampala, she had this to say:
“I work with a mostly distributed team of 5 other people. We leverage video conferencing tools like Google Meet, Zoom, and Slack for our day-to-day interactions. We have a video call once a week to plan out our sprint. We also have a daily standup call to report progress and have blockers resolved if there are any. We are free to reach out via Slack at any point in the day for any reason. And when a Slack message just won’t do, it is our practice to jump on calls and quickly brainstorm, ask questions, resolve blockers and a host of other things that come up.”
Before joining Andela two and a half years ago, Donna worked as a software engineer in Kampala. She holds a first-class honors degree in software engineering degree from Makerere University, Uganda. Her journey into Andela is a story of opportunity matching with readiness and determination. She is one of the first set of software engineers hired at Andela Uganda, right after we launched operations in Kampala. As a software engineer at Andela, Donna has the opportunity to either come into the office to do her work or work from home — or anywhere. It all depends on which suits her best. Whatever she opts for, she has access to collaborate with peers across all our offices on the continent, and be able to do the kind of excellent work Andelans are famous for.
Every value has an associated boolean, true or false, value in JS. For example, a null value has an associated boolean value of false. A string value, such as abc has an associated boolean value of true.
Values that are associated with boolean true are said to be truthy. Values that are associated with boolean false values are said to be falsy.
A single “!” symbol in javascript, also called a “bang”, is the logical “not” operator. If you place this operator in front of a boolean value, it will reverse the value, returning the opposite.
!true; // Returns false.
!false; // Returns true.
If a bang (“!”) returns the opposite truthy value, what would a bang executed twice on a value do?
const x = true; // Associated with true.
const a = !x; // The returns the opposite of 'x', false.
const b = !a; // The ! takes value 'a' of false and reverses it back to true.
!!true // Evaluates to true.
!!false // Evaluates to false.
So, running a bang twice determines the opposite of value, and then returns the opposite of that.
With non-boolean values, it is kind of cool to see what the double bang does:
const x = 'abc'; // Associated with true.
const a = !x; // The ! determines x is associated with true and returns the opposite, false.
const b = !a; // The ! takes value 'a' of false and reverses it to true.
!!'abc' // Evaluates to true.
!!null // Evaluates to false.
Knowing the associated boolean value of any given value is helpful if you want to quickly reduce a value to a boolean:
function BankAccount(cash) {
this.cash = cash;
this.hasMoney = !!cash;
}
var account = new BankAccount(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true
var emptyAccount = new BankAccount(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false
In this case, if an account.cash value is greater than zero, the account.hasMoney will be true.
Catherine Kimani is a software engineer at Andela Kenya. Over the last 7 months, while living in Nairobi, she has worked as a backend engineer at Shipwell, an Andela Partner company based out in the United States.
Company Spotlight: Shipwell
Shipwell is a software platform that helps people and companies move freight efficiently. The company is based in Austin, Texas, but has operations in Canada, Mexico, and Europe. The company was founded in 2016 by Greg Price and Jason Traff with a mission to fundamentally change the way the world moves freight. A Techcrunch feature about Shipwell on their recent Series B funding round says “The Austin-based company works with multiple service providers — including the logistics services unicorn Flexport — but operates as a marketplace for shippers to connect with freight companies and online tools to manage those shipments. In effect, the company is pitching to any retailer or outlet a version of the proprietary logistics management toolkit that has made Amazon so successful.”
In the three years since they’ve been in business, they’ve connected 25000 trucks, moved 98000 shipments and have tracked freight across 18 million miles.
Remote Hero Spotlight: Catherine Kimani
Catherine has been at Andela since December 2018. She holds a degree in software engineering from Kenyatta University. Apart from building software for a living, Catherine is involved in the Python developer community in Nairobi, helping to nurture and mentor junior software engineers. It is this commitment to building the future of African tech that drew her to Andela, she says, because Andela’s mission and hers were aligned.
Software engineers at Andela typically work as remote members of engineering teams at hundreds of global companies. Catherine’s work at Shipwell is mainly to help with the integration of the various service providers onto Shipwell’s platform.
On Wielding Remote Work
When asked about her workflow and how her days typically go, seeing as she works from her city in Nairobi, she says,
“Our work hours are from 2:00 pm to 10:00 pm EAT. This means that for meetings involving our remote peers, they have to be scheduled for the morning hours, their time. To ensure sustained communication, we have various tools: we use Slack for regular updates and casual chats, Jira for managing the tickets and conversations around the requirements and testing criteria, etc and GitHub for version control. We have shared daily stand-ups (via Zoom or Hangouts) which allow us to know what everyone is working on and clear blockers early. Overall, everyone has access to everyone and we know to reach out via slack or email to get assistance when needed. Our team also has a manager in the Austin office who helps ensure we remain integrated with them by championing issues that affect us and being our representative in the office.”
Catherine’s journey to being a software engineer was prompted by an uncommon but cheerful source: a cartoon called Beast Wars, which she loved when she was much younger.
“I saw on the credits there was a software engineers section. So when the time to choose a university course came, I knew I didn’t want to study Law or Politics, and a Bachelor of Commerce degree seemed overrated to me. In the process, I figured Sales was tough because I am not naturally extroverted, so I concluded my best fit was a combination of business and tech. In the university choices, I picked Computer Engineering but my offer letter invited me to Software Engineering. Since I didn’t know any better, I thought learning software engineering would lead to a career developing cartoons like beast wars.”
Well, she hasn’t done any cartoon or movie programming yet, but her work is helping Shipwell serve more than 4,000 customers per month with supply chains spanning multiple geographies around the world. Maybe she will eventually do some cartoon programming at some point and help bring a story to life that will be loved by millions as well.
The Remote Heroes event in Kampala was held on 21st November 2019 at Innovation Village in Ntinda. Guests started to arrive from 5 pm and the event began at exactly 6 pm. The theme of the event was “Remote Work: A Competitive Advantage in a Distributed World” and the panelists included Kirk Agbeyengah, the CTO of SafeBoda, an on-demand ride-hailing service for motorcycle taxis in Africa, Reinier van Scherpenzeel, the COO of Tunga, a network marketplace which provides paid software tasks from international companies to African developers, Donna Mwiine, a Senior Software Engineer at Andela Uganda, and Jimmy Sun, VP of Engineering at OpenInvest, a startup that enables people to invest according to their values. (OpenInvest has been a partner with Andela for the last year. The panel was moderated by Joshua Okello, a Senior Partner Engineering Manager at Andela.
The Panel Session
The panel session began by each panelist defining what ‘remote-first’ meant to them and why they chose to do remote work. Jimmy Sun joined remotely from the US at exactly 6:30 pm EAT and was introduced to the audience and asked to talk about Open Invest, his role at OpenInvest and how they’re fostering remote work. The following questions sum up what proved to be a very engaging panel session:
Qn: Why are companies starting to embrace the remote culture?
Kirk: Based on research, people are less productive when they are forced to commute to work, and sometimes being in the same space limits creativity
Reinier: I spent an hour in traffic to Ntinda from Bugolobi and sometimes I find myself Slacking someone that is seated next to me. Some jobs do not require you to be together to get work done on the same thing. But it is also about finding the right person for the right job. Why should software engineers from Africa be limited by access when they can deliver the same quality of work remotely?
Qn: Does this mean that the talent in Kampala is limiting the companies?
Donna: I have been working with a team in the US for quite a while now, and this has given me a lot of exposure. I did all this from the comfort of Kampala without having to leave the country.
QN: How are you (SafeBoda) managing the team in Barcelona from Kampala?
Kirk: We are all aligned as a team and we know that we have timelines and these contribute to the success of the company. We also measure performance through the same system as the remote teams. We do not clock in or check on the hours of work done. This often makes the team appreciate the work they do and give their best because they see that they are valued.
Qn: How do you build trust and rapport with a remote team?
Donna: When I first joined the partner team, I scheduled 20-minute calls with each member of the team to introduce myself and to establish a rapport with them. I also ensure that before we dive into work, we check in on how each person is doing. Having a relationship with the team helps with cohesiveness.
Qn: How do you ensure productivity while on a remote team?
Donna: I often communicate proactively. If I am stuck, I seek help immediately I notice that I am unable to solve this on my own. Having good tools to use that makes communication seamless helps as well.
Qn: How do you help your teammates in a different timezone, especially if they are stuck?
Kirk: We have someone in the U.S and we ensure that when we hire, we have at least 2 people who can do the same job so that if the other person is asleep, someone else can help in another time zone. Sometimes they change their working time to adjust to the rest of the team.
Qn: How do you manage work-life balance in remote work and time difference zones?
Reiner: It is a two-sided coin. When I have to do something with my family, I can do it, but it also means that I may have to take a call with a client after the kids have gone to bed.
Donna: I am yet to completely crack the work-life balance code. It was a challenge in the beginning. I worked from 5pm – 2am, which meant that I did not hang out with my friends for the first 6 months. But I slowly started managing my schedule better. I learnt how to compensate for time spent on personal time. I have gained the trust of my partner and they know that I am available for work when I am needed. This takes discipline too. You have to choose me-time and manage expectations as well.
Qn: How do you replicate team culture in a remote team?
Jim: It is very difficult to do this, but we try to get the team to understand each other and have real conversations. We often try to get at least 80% of the team to meet in person at least once a year, but you cannot replicate in-person relationships.
Stephen Magero (Andela): At Andela, we build the relationship by having our engineers visit their teammates so that they can build rapport.
Kirk: At Safeboda, we have engineers from Barcelona where they do not understand the business and Kampala. We bring them to Uganda so that they can experience the service. Explaining why something won’t work because of OTT is very difficult until they have experienced it.
Parting shots:
Jim: Companies like Andela have given companies like ours access to great talent who are remote and are managing their growth well.
Reinier: When you are a remote worker, you have to really deliver and communicate. When you love your job, it is not that difficult but you have to manage yourself well.
Kirk: For some companies, it is not easy to manage remote workers. Sometimes it is difficult to provide benefits for remote employees because you need to register in their country. It requires a lot of discipline to manage work-life balance while doing remote work.
Donna: Remote work, has its challenges and you have to be proactive. You have to communicate, get out of your comfort zone and make yourself known to the team.
There was a brief Q&A session after which the panel discussion was closed. Closing remarks were delivered by Gloria Kemigisha, who represented the Country Director’s office, followed by a cocktail and networking session before the guests made their way home.
So, you just switched careers and now you are into tech, a software engineer or you have been doing the programming, coding thing for a few years and the same question is burning through your mind, how do I get my programming skills from 10 to 300mph in less than no time like a state of the art sports car?
Yes, you already know becoming a Dan Abramov (co-author of Redux and create-react-app) or David Heinemeier Hansson (creator of the Rails framework) takes time, however, time is what you do not have and like me, you’re looking for smart ways and hacks to gain proficiency in as little time as possible.
The bad news is everything worthwhile takes time and you’re not going to wake up next week an expert programmer.
The good news is that you can be very deliberate about your growth and cut your time in more than half. You can wake up next week a much better programmer/software engineer than you were today.
To be clear this article does not necessarily address how to grow your career, branding yourself and looking good to the software community. You can appear amazing and not know shit. While the techniques discussed here are definitely transferrable to growing and branding yourself, it is not its main focus.
The focus here is to increment the substance you are made of. Your knowledge base and ability to solve problems like they are nothing, how do you get to become a world-class engineer capable of leading global engineering teams in as little time as possible by employing battle-tested hacks? Let’s take a deep dive.
Practice the basics
It seems like a no brainer but it’s amazing how many software engineers do not really understand the language and tools with which they work with every day. A consequence of this is a lack of confidence and not being able to bend these tools to your desire, how could you? You don’t know the quirks, highs, and lows of these tools. Learn the underlying language and the framework will be easier to work with. Learn JavaScript properly and React or Vue will be much easier. Of course, nothing stops you from starting with the framework first but learn the underlying technology especially if its a framework you use regularly. Who knows you just might build your own framework.
Learn how to learn effectively and fast
The software development world moves very fast and tools that are really popular today might be out of fashion a year later as we discover better and more efficient ways of doing things. Learning how to pick up new tools and languages fast as a software engineer is essential sometimes to even keeping your job. Studies show that you learn and remember more when you participate actively. This is achieved by building something small with that tool or language. Also, realize that in most cases you do not need to learn every nuance of that tool. You only need a working knowledge. In the end, employers care mostly if you can solve their problems not necessarily the amount of knowledge you have on the language or tool. I’ll dive deep into this in another article. Stay tuned.
Study Algorithms
If you do not have a computer science background, chances are that this one will get you frowning. However, you need to embrace it to eventually change your game fast. While you may not use most of the algorithms you study in a real-world scenario, you’ll encounter situations that require you to have knowledge of them. You need to understand space and time complexity and how they affect your application. Additionally, algorithms will help expand your brain’s ability to cope with complexity and improve your problem-solving skills. Also, most top software engineering jobs will make you write algorithm tests and whiteboard solutions. You will cruise through them if you have a good grasp of these. You can improve your algorithm skills using platforms like Hacker rank, Codewars, Leetcode, and exercism.io. The ultimate goal is to solve challenges and get battle scars.
Improve your communication skills
Great software engineers can explain their code and how it proffers a solution to a problem. Good speaking skills are very essential to your growth. You will need to communicate with your team, designers and other people who are not tech-savvy and the mere mention of anything remotely technical gives a headache. Your ability to flawlessly communicate what you have in mind will determine how these people rate your skills. This will likely hurt you the most. Learn to communicate or you’ll remain mediocre.
Study design patterns and clean architecture
One of the things I love about web development and tech, in general, is that things move fast, languages and tools evolve. However, the basic principles remain mostly the same. If you know these principles and design patterns, you’ll most likely pick up any programming language or tool with ease. Learn these software paradigms and they will serve you for a really long time and differentiate you from the pack. As you become more senior, you’ll realize that it’s not enough to get your code to work. that’s just the first step. It has to be reusable, maintainable, follow established best practices and most importantly, simple for other software engineers to understand and work with. You can start with books like Clean code by Robert C Martin, Patterns of enterprise application architecture by Martin Fowler, Design patterns: Elements of Reusable Object-Oriented software.
Learn from other software engineers
One of the ways to quickly get to where you want to be even in other fields unrelated to software engineering is to look for people you believe are where you want to be and speak with them, associate with them, follow them on social media, listen and learn from their wisdom and mistakes. As a wise software engineer that wishes to grow exponentially, seek out those that have made it big in your given stack, listen to their talks and podcasts. If you code Javascript, for instance, listen to JSconf, Jamstack conf, React conf, Pycon if you do python, RailsConf if you do Ruby/Rails. These conferences have free videos on youtube. Subscribe to developer weekly newsletters Eg Hackernewsletter, Frontend focus, Javascript weekly, Mybridge (I personally love this one). If podcasts are your thing, Syntax FM by Wes Bos and Scott Tolinski is particularly good. Ask others (this can be other developers with more experience or even less experience! Just learn.) questions about things you do not understand. Nobody understands everything and we all get stuck. It’s what you do when you get stuck that matters.
T-square your knowledge
As a software engineer, you will sometimes be tempted to learn other seemingly in-demand, attractive tech. There’s always a new, hot technology you should be learning. While it’s important you have an attitude to always learn new things, If you are going to really grow, you need to find a niche for yourself and not jump from one language or framework to another too early. Pick one technology and its associated tools and learn it very well. Go deep first in one language after which you can now explore other technologies. Usually, most of the concepts you learn from a programming language will be transferrable to other languages once you learn it well. There will always be something hot on the block anytime you’re ready. Be an expert in one thing, have a base first before expanding your horizon.
Do deep work
In this age of social media, the ability to focus for extended periods of time without distraction is becoming difficult. However, to really churn out good software at a great pace and learn proficiently, you need to find a way to concentrate and practice your craft for extended periods. You will be surprised at how your productivity and retention will improve. Cal Newport goes into detail about this in his book Deep work or you can read a summary of the concepts here or in this article.
Read other peoples code
Most of your life as a software engineer will be spent understanding other people’s code, fixing it, optimizing it while adding your own bugs which you may still need to fix later. To get ahead in your career, you need to make a habit of reading other people’s code and patterns. You can begin by looking at popular open-source tools in your stack. Study the code, google and ask questions about parts you don’t understand, breaking things down one after the other. At first, it will give you a headache but after some time it will start making sense, then you can start contributing. That alone is a good validation of your skills. Imagine going for a React interview and the interviewer finds out you’ve been contributing to React’s source code!.
Sit down and actually code
Finally, all the best techniques in the world will not help you if you do not sit down and get your hands dirty. To really learn how to swim, you need to get into the water. To become an expert software engineer, you need to spend time coding. No way around that. You have to put in the work. Pause and think back for a moment, how many hours did you spend actively coding yesterday, how about 2 days ago. The more time you invest, the more you will learn and grow. It’s that simple. You need to also constantly challenge yourself while doing this. There’s no real gain to keep doing or working with a technology you know so well already. Move to untested waters, integrate what you know already with tools you do not know. Beware of the comfort zone, it’s a growth killer.
When I started at Andela as CTO I had an opportunity to introduce myself and set expectations for the technology product function. I described the goals and values I hold for individuals building technology. This was generalized across all product roles – engineering, product, design. Here is what I communicated at the time:
Mission
The most important thing we do as a technology organization is to deliver value to our customers in the form of compelling capabilities that solve business problems, quickly.
We Must
– Be accountable for delivery
– Be lean (i.e. build, learn, iterate)
– Do not be afraid to fail
– Work hard at communication across a remote organization
– Focus on delivering business value
What I Value
– Customer Value is Priority #1
– Accountability and Taking Ownership
– Lean Approach to Delivery
– Deep Customer Empathy
– High-Quality Scalable Systems
– Design as a Differentiator / Emotive UI’s
– Trust (and Respect)
– Team above Individual
– Working Hard (to be great at your craft)
– Growing Your Skills (and Kaizen)
As 2019 wraps up and we move into the new year, I want to reflect and go deeper with more specificity on what I expect out of software engineers.
These expectations come from learnings over many, many years of software development during my career. The reader should view these insights as a set of desired behaviors to produce better software.
Expectations of a Software Engineer
Doing Your Work
Show up ready to work and be proactive.
We have to deliver because that is what the business expects of us. Yes, we use deadlines because they drive outcomes. Some people argue different forms of programming or agile methods. But, I will tell you this, I will always take SCRUM over Kanban for the simple reason that you have an end of sprint deadline with SCRUM that forces an outcome. And in the spirit of driving personal results, do not be that person waiting to take a ticket – lean into your work and ask for more problems to solve, stories to pull into the sprint, or tough bugs to squash.
Own the problem, know the customer, know the product
It is critical that you understand the problems you are solving so you can be part of the solution. You should also strive to know how to use the product you are working on inside and out. Step up and give demos to show your knowledge. And, if you are not meeting with the customer from time to time, you are not doing enough to understand the problem.
Production problems take top priority
It is unacceptable to say we will get to it later. If the system is losing data or if production is down, put fixing the issue at the top of the queue and don’t stop until you have a remedy. It might be painful in the moment, but I can tell you that the ‘esprit de corps’ (the feeling of pride) and the sense of accomplishment you and your team feel after conquering the problem, will last a long time.
Think like a lazy person
Lazy not in how you act at work, but in how you solve a problem – sounds funny, but this is about how you automate not just the product you are building, but your environment, your testing set up, your toolchain, etc.. Some of the best engineers I know are inherently lazy always looking for the most automated way to get something done.
Engage others quickly when you are struck
Writing software is a team sport and the longer you go down a rabbit hole without asking for help, the more you are slowing the overall process. Yes, try to figure it out on your own, but quickly recognize when you are blocked so you can reach out to others to get moving forward again.
Engineering Software Proficiently
Code must be testable, able to scale, and performant
Do you have a unit test? Are the test cases easy to execute? Did you use feature flags? Did you hard code the CSS or is it configuration driven? Did you think how the service will perform at low, medium, and high load? Answer questions like these as you code. Have a mental checklist to go through before pushing your work.
Everyone is responsible for code maintenance and improving quality
It takes experience to learn this mindset, but once you push your PR, the code you have written goes from being yours to being everyones. Do not take a mindset of this is mine. You have to be open to review and you have to entrust others to help make it better. And, as you interact with new areas of the codebase you have a responsibility to improve it. It is kind of like responsible camping – leave the place where you were cleaner than when you found it.
Deliver great UI’s user’s love
Always have empathy for the user and pay attention to the little stuff (e.g. the padding, the typography, the use of whitespace). You should also suggest better workflows if it makes sense and tell your team about it. Make the UI great as this is required to be relevant in today’s world. The best frontend engineers I know are not only quick to implement the interface, but they think like a user, always striving for clarity of experience and suggesting improvements.
Write functional code that is easy to read and executes the task
Engineers have religious debates over code reviews and what should be in a pull request all the way down to the use of semicolons. However, this is a must: your code has to be readable (i.e. easy to understand with good commenting) and it has to perform the function it set out to achieve. Those are the basics that are required.
Documentation: write it to explain and read it to understand
Yes, you must do it. As you progress in your career you start doing more of this to ensure communication of the proper design intent. It is also is one of the best ways to ensure maintainability and easy onboarding of new team members. Part of your job is writing documentation. You need to read the documentation, too. This is how you come up to speed on a new service or technology and avoid common mistakes.
Software must be fast, do the task, and entail a little delight
And in that order. The best user experience is a fast performing application with low latency, quick response times, and few spinning wheels waiting on a function to complete. Of course, the software has to do the job as described, and it must do the task well. Otherwise, just go home. I also advocate for software products to always have a little bit of delight for the user. Put personality into the copy or add that extra feature that makes the user smile or go “that is cool”. As with anything, it’s the details that set us apart.
Improving Yourself and Team
Be great at stakeholder management
Being a great stakeholder means being invested in the work you are doing with the team you are doing it with. You should always be working to understand by asking questions, improving your estimates so you can help set expectations better, and pro-actively engaging and constantly communicating with your team members. You need to keep the team informed of progress, blockers, and new ideas, too.
Demand validated requirements and mockups
Sometimes people think along the lines: Product Managers own the “what and why” and Engineers own the “how” to build it. That is essentially the case in terms of responsibilities, but to be a high functioning team, engineers must also test the requirements. Demand validated requirements because it would be awful to be working on something that no one cares about.
Suggest solutions, not just raise problems
Be part of the solution. If you see issues with requirements, the code base, processes, or team dynamics, you should raise them in a considerate way and suggest solutions. People appreciate and are more willing to take action when solutions to problems are offered up along with the issue itself. Challenge in a constructive way and be open to constructive feedback yourself.
Work at forming a cohesive team and do your part
Be proactive, share ideas, help others. You also need to be constructive with criticism. Critiquing work is very important and makes us better, but it has to be done in a way that is focused on the goal of improving the work and not aimed at the individual. Healthy discussion is critical, but strive for doing it in the context of a high functioning team that has a deep amount of trust and respect for others. No one wants to work with a jerk, so be self-aware and avoid being that person.
Always be learning and share something relevant
Technology is always changing and you need to change along with it. Continue to learn new things and never rest on your past accomplishments. Seek out new challenges that help you improve. Also share new learnings with the team that can help produce better outcomes.
Disclaimer: This isn’t really a hack. There are no eight steps to beat any kind of disorder. If you’re dealing with any kind of disorder, you should try to seek professional help. However, having received a diagnosis for an anxiety disorder a year ago, these are ways that I have applied to help me stay productive and successful in an otherwise anxiety-unfriendly environment.
It was in the fall of 2018 that I first came to terms with the possibility of suffering from a disorder. Before that, I had no idea it was even a term. During this period, the workload and intensity of the project I was contributing towards, together with the rapid speed of delivery expected in a technology stack that was completely new to me triggered a reaction that I had not encountered before, at least on this level.
Before long, I was increasingly panic-stricken, frequently woke up with palpitations and barely ate. It’s quite frustrating to know that you are not okay, but have no idea what is wrong. One day a friend of mine mentioned anxiety disorder, but since I hadn’t really experienced it before I did a bit of research and left it at that. Over the next couple of days, however, my trend and behaviour worsened — necessitating a visit to a mental health professional.
“It’s quite frustrating to know that you are not okay, but have no idea what is wrong.”
The common definition of an anxiety disorder is that it is a category of mental disorders characterized by significant feelings of worry and fear. Normally, everyone experiences periods of anxiety and nervousness, for example when starting on or working on a complex task or preparing for a job interview. However, with the disorder, it’s different because you could be tense and worried for days on end, and it could be crippling to your work. Professionals inform that anyone is susceptible to an anxiety disorder or any other form of mental disorder at different points in their lives, based on environmental triggers. Other causes may be genetic or a change in the brain hormonal makeup.
I have not attempted to treat this by medication, although that is a viable and most advised way to handle any disorder. However, being aware has helped me develop ways to still be productive. Here are some of the things that have worked for me:
Pick a time when you’re least anxious to work. I noticed that it was during the morning hours that I actually had chronic anxiety, and so starting to work from afternoon to late at night became a better alternative and one that saw me get most of my work done.
Develop a routine and stick to it. Generally, anxiety will talk you out of anything that’s good for you. Having a routine is helpful because it keeps your mind on a sort of auto-pilot mode where you simply follow the sequence of activities. Less worry-time, more doing time. That’s the goal of beating anxiety. When I learned that I had a hard time keeping my schedule, I picked someone to keep me accountable.
Request extra time when working on tasks and take breaks when necessary. It might take 4 days to accomplish something but ask for 2 more just in case you experience an attack. This is helpful for you but also less frustrating for your team members, as their expectations are managed. Factor in taking frequent breaks to rid your mind of the pressure.
Regularly do something else outside of work that you enjoy. Most people take this lightly but engaging in an outdoor physical activity goes a long way. Unfortunately, most disorders come with their cousins and for me, the anxiety disorder came with a depressive disorder too. I found it helpful to hit the gym a few times a week. Participating in an activity that is outward and less focused on you such as giving back, volunteering or working with charity also helps. Whatever you choose to do should be incorporated in your weekly, monthly or yearly schedule.
Talk to a professional. Most people approach counseling or therapy as some 30 or 45 minutes event that will help you solve your problem, but that is rarely the case. A professional simply helps you understand what you’re dealing with so you can handle it better. You have to do the hard work of facing your trauma and addressing it, as well as eliminating your triggers so you can live a better life and be productive
A support system is key. This is tricky because mental disorders tend to make you live in isolation or rather make you out up an “I’m okay” face and attitude when it’s not the case. So no one would really know what’s going on if there’s a problem. It helps to have a few friends you can tell if you’re having an attack, or who can ask you when was the last one and what your trigger was.
Avoid your triggers. With time you’re able to identify some of your triggers. It could be specific situations, it could be specific places, times of the day or even people. Yes, people. Keep track of how these things affect you and do well to stay clear because failing to do so will mean that you have to factor in the nursing time long after you have let them affect you.
Remember you are bigger. The biggest hack is to remember that you are stronger than the disorder. Anxiety sort of talks down to you and makes you feel like less of yourself. It will make you feel like all your efforts and skill are worthless, every day. Remember it’s sheer mind-talk and if you overcame the most anxious of days in the past you will kill it this time too! Although ignoring it altogether isn’t much help, I have found it more effective to welcome anxiety when it comes knocking, but then let it know I am actually busy being epic.
In this tutorial, you will learn how to set up Bitbucket Pipelines for a PHP & Node.js application and deploy them to your Ubuntu 18.04 server.
I’m writing this because I wasn’t able to get a step-by-step guide for how to do it from one source. I had to do some research and use different sources (some of which can be found at the bottom of the article) to achieve what I wanted. Hopefully, this will be of help to someone.
Let’s get to it, shall we?
For starters, let’s define terms:
Continuous Integration(CI) — is a development practice where developers integrate code into a shared repository frequently, preferably several times a day. Each integration can then be verified by an automated build and automated tests.
Continuous Deployment(CD) — is a strategy for software releases wherein any code commit that passes the automated testing phase is automatically released into the production environment, making changes that are visible to the software’s users.
My primary target was deploying an application to my Ubuntu DigitalOcean server (get some credit when you sign up by clicking here. Full disclosure: I get something in return) without having to SSH into it and run the deployment script.
Enable Pipelines in Bitbucket
Go to Your repository Settings ->Under the section of the pipeline, click on Settings -> Click on the Enable Pipelines Switchto enable pipelines.
Pipelines are now enabled.
Next up, we’ll set up SSH keys for our repository.
Set up repository SSH Keys
These are the keys you’ll set up on your production or staging server to enable external logins to your server from bitbucket during the deployment steps which we will discuss later on.
To set these up, got to SSH Keys(still within the Pipelines Section in your repository settings) -> then click on Generate keys. You could use your own keys but there are a couple of sources that have had issues and ended up advise
against it. Generating your own keys is the best alternative.
After that, set up Known Hosts. Enter the IP address of your Ubuntu server as the Host address then click Fetch to generate the host’s fingerprint. After the fingerprint is generated, click on the Add Host button.
Next up, we’ll add the public key from our repository to the authorized_keys file of our Ubuntu server.
Adding public key from Bitbucket Repository to Ubuntu server authorized_keys
Login to your Ubuntu server. It’s important to note that SSH login should be enabled for your server. If you haven’t enabled it, kindly follow the steps outlined here.
# Enter .ssh folder
$ cd ~/.ssh
# Copy key to authorized_keys file
# Open file using your favourite editor e.g. nano
$ sudo nano authorized_keys
# Add the copied public key from bitbucket on a new line then save(there's a 'Copy public key' button on the SSH keys page)
Permanently add private key identity to the authentication agent
To prevent entering the passphrase to your private key while pulling your Bitbucket repositories to your servers, you need to persist your identity using ssh-add. By default, the identity is lost every time you log out hence the need to persist it. This is important if your key has a passphrase set up. If not, you can ignore this part.
Open up your .bashrc using the following command.
$ sudo nano ~/.bashrc
Copy the following contents to the bottom of your .bashrc file.
# SSH Permanent passphrase
SSH_ENV=$HOME/.ssh/environment
# start the ssh-agent
function start_agent {
echo "Initializing new SSH agent..."
# spawn ssh-agent
/usr/bin/ssh-agent | sed 's/^echo/#echo/' > ${SSH_ENV}
echo succeeded
chmod 600 ${SSH_ENV}
. ${SSH_ENV} > /dev/null
/usr/bin/ssh-add
}
if [ -f "${SSH_ENV}" ]; then
. ${SSH_ENV} > /dev/null
ps -ef | grep ${SSH_AGENT_PID} | grep ssh-agent$ > /dev/null || {
start_agent;
}
else
start_agent;
fi
This keeps the ssh-agent running even when you log out of your server and persists your private key identity. To get it going, however, you’ll need to log out and log in to your server. Once you log in, the SSH Agent will be initialized and you’ll be requested to add the passphrase to your private key.
Set up a deployment script on your server
This is the script that we will run to deploy your application. It is basically a list of the commands you use to deploy your application on your server.
Run the following commands to set up an executable deployment script.
# Create script at the root
$ cd
$ touch deployApi.sh
# make executable
$ chmod +x deployApi.sh
# Executing script
$ ./deployApi.sh
#!/bin/bash
root="/var/www/example.com/html"
cd $root
echo -e '\e[1m\e[34mPulling code from remote..\e[0m\n'
git pull origin master
echo -e '\e[1m\e[34m\nChecking for new npm version and installing..\e[0m\n'
npm install -g npm
echo -e '\e[1m\e[34m\nInstalling required packages..\e[0m\n'
npm install
echo -e '\e[1m\e[34m\nRestarting service..\e[0m\n'
# Replace 1 with the ID of the service running your application
pm2 restart 1
echo -e '\n\e[1m\e[34mDeployment successful\e[0m'
Setting up this script is important as bitbucket will run it once it’s logged into your server.
Once you are done with that, we can now set up the bitbucket-pipelines.yml.
Setting up bitbucket-pipelines.yml
This is the file that defines your build, test and deployment configurations. It can be configured per branch i.e. what tests to run when some code is pushed to master and where it will be deployed. If you are using a staging server, you can set up the server details separate from the production server details.
Bitbucket has made it easy to set this up by providing templates based on the type of application you are running.
Go to the Pipelines menu item on your left to proceed.
Choose a language template. In this case, PHP or Node.js.
Set up a YML file.
Click on Save. This will commit to your branch and create a new pipeline based on your YML file.
*Note: These are sample yml files. In your script section, you can run the commands necessary for your application.
Setting up bitbucket-pipelines.yml file for our PHP application
This script showcases how you can deploy changes based on different branches.
# This is a sample build configuration for PHP.
# Check our guides at https://confluence.atlassian.com/x/e8YWN for more examples.
# Only use spaces to indent your .yml configuration.
# -----
# You can specify a custom docker image from Docker Hub as your build environment.
image: php:7.1.29
pipelines:
# default - contains the steps that will run on every push.
# default:
branches:
# You can include your custom branches and the steps you'd like to undertake e.g. testing
#staging:
master:
- step:
caches:
- composer
script:
- apt-get update && apt-get install -y unzip
- curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
- composer install
- step:
name: Deploy to production
deployment: production
script:
- pipe: atlassian/ssh-run:0.2.2
variables:
SSH_USER: 'your-server-username'
SERVER: 'your-server-ip-address'
COMMAND: './your-deployment-script.sh'
Setting up bitbucket-pipelines.yml file for your Node.js application
# This is a sample build configuration for JavaScript.
# Check our guides at https://confluence.atlassian.com/x/14UWN for more examples.
# Only use spaces to indent your .yml configuration.
# -----
# You can specify a custom docker image from Docker Hub as your build environment.
image: node:10.15.3
pipelines:
default:
- step:
caches:
- node
script: # Modify the commands below to build your repository.
- npm install
- npm test
- step:
name: Deploy to production
deployment: production
# trigger: manual # Uncomment to make this a manual deployment.
script:
- echo "Deploying to production environment"
- pipe: atlassian/ssh-run:0.2.2
variables:
SSH_USER: 'your-server-username'
SERVER: 'your-server-ip-address'
COMMAND: './your-deployment-script.sh'
Conclusion
By following this tutorial, you will be able to deploy your applications to your Ubuntu server.
Bitbucket allocates 50 free build minutes per account so keep that in mind as you write your YML files. The builds won’t run if you are past your allocated minutes. Keep the YML files short and sweet.
Thank you for reading.
If you find any errors, have any issues or questions don’t hesitate to reach out via the comment section.
, there is this lovely article by Katia Wheeler that should set you on your way. It is located in the references.
', zebra: '
', unicorn: '
'}
for (const key in equine) {
if (equine.hasOwnProperty(key)) {
console.log('>',equine[key]);
}
}
// Unwrap the the Values
for (const val of Object.values(equine)) {
console.log('1',val);
}
// Create a Map
const equineq = new Map(Object.entries(equine));
for (const v of equineq.values()) {
console.log('2',v)
}
