On October 11th and 12th, I attended the Concatenate Conference held at Zone Tech Park, Lagos, Nigeria. It is a free conference for African developers.

This year's event happened in style as the event was scheduled to hold in two countries (Lagos, Nigeria and Nairobi, Kenya). Speakers flew in to attend the conference. Most of these speakers have not been to Africa before. They experienced Lagos traffic, enjoyed the scenery, and the Nigerian Jollof Rice.

The event was packed with well-thought-out sessions and lightning talks presented by amazing people. These centred around community and support, building usable products, performance, etc. The highlights are summarized below.

Engaging Empathy

The floor was opened by the amazing Sharon Steed with a talk on Engaging Empathy. The most important part that struck me is when she talked about embracing who you are and pushing through it, knowing that vulnerability is just trying.

She identified 3 Key Empathy Behaviours;

• Patience (the foundation of empathy, being present in a distracting world),
• Perspective (the root of understanding, thinking before you speak, eliminating bias) and
• Connection (the real reason we communicate, leaving every conversation in a better place than where it began).

She concluded the talk with a heart-warming note. She stated that

Life is hard; putting people first is important when collaborating as a team because, the more thoughtful that we are, the more connections we make by embracing empathy.

Retrospective of how CodeSandbox was built

Ives Van Hoorne gave a Retrospective of how CodeSandbox was built. He talked about how he moved from ideation to product actualization. Never would I have known that the CodeSandbox editor and the preview are two different applications until he mentioned it.

He concluded with the wise words:

If you have an idea that you deem imperfect, just work on it. It can turn into a great idea if you start working on it and keep evolving.

Seek external feedback; people being enthusiastic can motivate you to work and help refine the product. Also, release fast, don't over-engineer; keep it simple, stupid (KISS).

Key takeaways

• Abstract the core components
• Make your solution updatable
• Don't reinvent the wheel
• An item on the idea board may become a usable product

User-Centric Metrics

The loading and runtime experience on the web can be hard to measure. In the performance world, faster is better. A fast website improves the user experience leading to a boost in revenue. But, before optimizing, always measure.

Yoav discussed two approaches to measurement to determine the speed and user experience on the web:

• LAB (lab-based measurement): This does not represent your real users' experience. A computer is just set up to generate data and tests are run repeatedly under specific conditions e.g. Lighthouse, Webpagetest

• RUM (Real user measurement): This captures your real users' experience. However, this requires a lot of traffic to simulate, and tests must be run in a production environment to get the actual data. e.g. Chrome User Experience, PageSpeed Insights

Lab-based measurement helps collect data before shipping a product while RUM helps verify that the feature doesn't regress performance. Results from RUM can be used as data to improve the Lab.

The meaningful points to track the user's journey are:

• Visual
  • Speed Index
  • Visual completeness (FP, FCP, FID, LCP, etc.)
• Interactivity (TTI)
• User annoyance metrics

Event timing also allows you to tag important elements in your page and get performance entries for them

<h1 elementtiming="usefulcontent">Useful content</h1>

Design Systems and Art Direction

Art Direction combines art and design to evoke a cultural and emotional reaction - Dan Mall

Design Systems are the how, Art Direction is the why. This is where you check if the end-user feels good when using your product.

It is better to modify, not remove the defaults because you feel it doesn't fit with the aesthetics of the website e.g. the :focus outline

:focus {
  outline: thin solid var(--primary-color);
  outline-offset: .25rem;
}

Translation !== Localization. Localization does not mean changing words to different languages. It entails infusing the local market into the design; making the entire experience more appropriate for the culture of the user. It helps them feel like the product is made just for them.

It is not right to make assumptions about other people's culture, include them in the design process. Consider avatar colour, writing mode, design style etc. These are things involved in localization, not changing the language to that of the audience.

Accessibility is a collective effort. Don't make certain components accessible and the rest inaccessible. It is as good as no accessibility optimization done. The whole is better than the sum of its parts.

The Cost Of JavaScript in 2019

After downloading a web page, executing JavaScript becomes the dominant cost. JavaScript is the most expensive part of a website. When it blocks the main thread, nothing else can happen. You have to optimize the code you're loading to improve user experience. Note that you need to make performance part of the conversation from the initial stage; set performance budgets to avoid degrading performance.

Small JavaScript bundles improve download speed, lower memory usage and reduce CPU costs

Key takeaways

• Reduce the amount of JavaScript you ship
• Avoid large bundles (50KB+)
• Avoid large inline scripts
• Ship less code (minify, cache)
• Download times are critical for low-end phones
• Use code-splitting
• Use lazy-loading
• Audit JavaScript regularly using webpack bundle analyzer, source-map explorer, import cost for VS Code
• Avoid using Moment.js, try date-fns.org instead
• Be careful when using lodash. Instead of importing the entire library, use specific imports e.g.

import times from 'lodash/times;

is better than

import { times } from 'lodash;

For more savings, try lodash-webpack-plugin.

• Use Light Wallet or bundle size for setting performance budgets

Improving performance is a journey. Take it one step at a time. Measure, optimize, monitor and repeat.

The Future of Web Animation

With 3D animations, there are lots of areas yet to be explored in the web development industry. Think outside the box; create applications that people would remember after they have seen it once (one that currently does not exist) because the web is meant for us to invent, share and communicate.

However, it is imperative to note that design and page transitions can impact cognitive load. When making a change in the design or animating on the web, consider the cognitive load it may create on the users.

Systems of Systems

Every decision that we make at the atomic level has a huge impact that would help us build at scale.

Nothing can be changed until it is faced.

There's a need to work as one; we are meant to help people who are less privileged than us. We must learn to lift as we climb. Be Redwoods but have interwoven roots like Ivy to stand tall and strong.

Serverless Can Do That?!

With serverless, you focus on building your ideas, not on deployment as a lot of things are abstracted. Servers scale to meet your current workload. You can explore hosting services like Netlify, Azure, etc. to get started.

npm install netlify-cli
npm install azure-functions-core-tools

Key takeaways

• Write stateless code. You can't preserve state within function calls
• Serverless applications are event-driven
• Use tools that generate the boilerplate code for you
• Apply the Single Responsibility Principle

Building Usable Products

Don't ship complicated products, let products solve users' problems. Understand your users, test with them before launch and continuously collect feedback to help improve the product.

Docker for Dev and Test

Docker is not for DevOps Engineer alone. It can make it easy for teams to set up and update their development environment without having to install a variety of frameworks or tools.

Docker Container !== Virtual Machine

Containers are

• Isolated
• Consistent
• Portable
• Easy to use

AHA (Avoid Hasty Abstractions) Programming

Complex abstractions make it difficult to make changes to a codebase. It is important to be thoughtful about abstractions. DRY or WET? Under or over-abstraction? You need to know when not to abstract and when to do so to help improve a codebase.

Key takeaways

• DRY is not necessarily a bad thing
• You cannot tell the future: optimize for change
• Duplication is far cheaper than the wrong abstraction, so prefer duplication over the wrong abstraction - Sandi Metz
• Wait for commonalities in duplicate code to scream at you for abstraction.
• If you have "shared code" with lots of branches then resist the urge to add more conditionals to it. Refactor it first.

Building a Business

Before saying that something can't be done, try to validate the idea (validate early, validate often). Focus on where your core values lies, solve a known problem. Don't re-invent the wheel, use available services to build your business and create value.

Solving Diabetics With An Open Source Artificial Pancreas

The mystery speaker, Scott Hanselman handled this topic. He discussed ways to control blood sugar level with software and hardware. He has an API that monitors his blood sugar level. This would enable his wife, doctor and Siri to monitor his blood sugar level and be sure he is in a good state.

Key takeaway

Instead of building a product just for yourself, involve the community and build solutions that would be beneficial to all. Everyone has a battle they are fighting, remember that once you look at colour and gender, these would remain unsolved.

A lot of useful talks were presented. You can watch the Day1, Day2 and Day 3 live stream to get a full grasp of all that happened during the conference.

The slides I could find on the web

Sharon's course on Engaging Empathy, Productive Debugging, User Centric Metrics, Building Usable Products, The Cost Of JavaScript in 2019, The Future of Web Animation, Systems of Systems, Serverless Can Do That?!, Moving from Beginner to a Junior Developer, AHA (Avoid Hasty Abstractions) Programming, Functional Programming Basics in JavaScript, Building Interactive Maps with Mapbox, Technical Debt for Us, VS CODE Power User Workflows, The State of Payments in Africa

Links to mentioned resources

Speed, Web.dev, URList, Jamstack, Staticgen, Headles CMS, Carbon design system, Accessibility, Geekbench browser for benchmarking, Atomic design, VS Code Extension for Azure functions, Docker, The Wrong Abstraction, Gatsby, Bare Metrics, Indie Hackers, TidePool, Nightscout Foundation, OpenAPS