DEV Community: Tiago Costa

CMSs are everywhere — and they go beyond publishing

Tiago Costa — Sat, 27 Apr 2024 19:28:53 +0000

Content Management Systems (CMSs) are the most important and ubiquitous technologies on the internet. They are essential for today’s digital environment. Where there are people, there is content. And where there is content, there is a CMS. If you need to publish a photo or a comment on social media, there is a CMS behind that. Do you want to post an article on a blog? A CMS is there too. It is no wonder the global CMS market is expected to exceed US $25.5 billion by 2028.

Despite the use of CMSs in nearly every area of the digital world, and their significant advancements in recent decades, many people continue to view them merely as publishing tools. That’s why many organizations still operate using inefficient workflows — first writing text in Word and then copying, pasting, and publishing it on a CMS like WordPress.

In reality, CMS tools are going beyond mere publishing. According to a report from Forrester Research, “The Five Key Trends That Will Shape Your Content Services Strategy,” knowledge management will shape the CMS market in the coming years. In other words, CMSs are crucial for content reuse, aggregation, and searching, as well as for the reinforcement of content governance policies.

Traditionally, CMSs have operated based on a separation between managing and delivering content. Management content involves control, modeling, and versioning, while delivery focuses on performance and optimization — encompassing what happens after you click the publish button. However, organizations have recently been overvaluing delivery.

One example of a shift away from this mindset, which focuses solely on delivery, is how National Geographic uses its CMS. The system aggregates content from various sources within the organization, including its international branches and user submissions, into a single, searchable repository. With this setup, users can access years of content creation in one place. Such aggregation enables editors to quickly curate content for special editions or continuous news cycles.

For instance, if a global event occurs, like the eruption of a volcano in the southern Pacific Ocean, the editorial team can easily compile related articles, videos, and interviews from both their archives and current submissions.

This is possible, of course, because of National Geographic’s powerful content strategy. The organization based its design on a CMS that has robust search capabilities (to retrieve content for reuse) as well as efficient tagging and governance systems that can assign metadata to each piece of content, such as the topic, relevance, source, and permission for reuse.

This type of content strategy reveals the increased opportunities that CMSs provide — not only for developers but also for content teams. Generally, marketing content teams are tempted to focus too much on creating, delivering, and tracking content, while paying less attention to contextualization and reuse of content.

Collaboration and productivity
There are further advantages of CMSs beyond simple publishing. For example, with the increasing adoption of AI, one emerging use is the application of CMSs for managing content validation. For example, before publishing content, the CMS could automatically check the legality of media usage in the target region and whether the content was created using AI. This process would help prevent potential legal issues and ensure a brand’s integrity.

For all stakeholders, this perspective offers endless benefits. One statistic shows that only 28% of organizations excel at the fast deployment of content. Using a CMS to manage your content, you can boost the productivity of content marketing teams and overcome the challenge of deploying content quickly. When a CMS organizes and contextualizes your content, you can will have quick access to find and use data related to any topic, synchronized and organized according to your specifications.

You can also boost your organization’s collaboration and workflow. CMSs naturally eliminate information silos. According to the 2023 Digital Trends report from Adobe, “Content Management in Focus", 42% of organizations still have content workflow issues that a CMS could resolve. A CMS, for example, ensures that everyone — from designers to legal advisors — can access the same version of content, which will reduce inconsistencies and duplicated work.

In summary, CMSs are critical tools in the current digital landscape. Implementing a CMS for tasks that go beyond publishing will provide various benefits. Think about how your organization can benefit from this expanded perspective.

Adding sounds to UI

Tiago Costa — Mon, 05 Oct 2020 19:49:42 +0000

We use a combination of vision and audition every day to gather information and interact with the world around us. However, this combination is not yet reflected in web interfaces. Most UIs are extremely vision-oriented/graphic-driven.

In the past, because of my music background, I always advocated for the use of sounds on websites. A marriage of vision and audition could be a powerful tool for interaction with human-computer interfaces.

Rafa Absar and Catherine Guastavino, authors of the paper Usability of non-speech sounds in user interfaces (2008), note that:

"If all the information is presented visually, it may lead to visual overload and may also lead to some information being missed, if the eyes are focused elsewhere."

At the time, the conventional wisdom was that sounds should be used only in gaming applications. This perception came from a misunderstanding that users had their full attention on the desktop. They would hardly ever get distracted. Therefore, the use of sounds would be unnecessary and could even detract from the user’s experience.

There were also technical limitations that could make the whole experience poor - lack of browser compatibility with audio formats and slow connections (it took time to load audio files on most devices).

Fortunately, things changed. There is less guesswork in UI development, UX became a predominant field, and the number of studies around the use of sounds in UI began to grow.

Sounds are becoming part of product personality and emotion. It is difficult to imagine, for example, products like Slack and Skype without their unique sounds.

By the way, companies like Facebook and Apple have in-house teams dedicated to designing sounds for their products.

Will Littlejohn, director of sound design at Facebook, says that, contrary to the old vision, very simple sounds can dramatically affect how people feel about a product:

"Sound designers bring context to your world and use the sonic realm to do it. The sounds you hear while you experience other sensory inputs play a large part in how you interpret reality."

I like this idea of adding sounds to UI. It gives me the feeling that these days, building user interfaces is more and more like composing symphonies. Everything should be perfectly synchronized. When a visual animation finishes, a sound should be played, and so on. It’s like an orchestra - many little details (graphic, motion, and audio) can work in harmony to create a great digital experience.

That said, it's important to know how to integrate sounds in the interfaces. Google’s Material UI team created an excellent guide about how sounds can reinforce specific functionalities. It's worth reading.

Basically, there are three uses for sounds:

1) Sound as hero
These sounds are used to highlight a critical moment, like a celebration when the user clears the email inbox. This can enhance the experience. For example, for an upload that takes a long time, instead of relying only on a progress bar, a sound can be used to indicate that the upload is complete.

According to Littlejohn, this "allows people to move on to other things they'd rather be doing instead of watching the progress bar. It's the same cognitive shift you make when you use a timer while cooking dinner."

2) Sound as decoration
I think this is one of the most difficult ways to work with sound since it involves branding. Sounds used in this way should be carefully chosen because they create a unique voice for the product. They are used to highlight expressive or playful moments. For example, when you start an application, a sound may play to express the product's theme.

3) Sound as feedback
Also called earcons, these sounds are the most common. They are used to reinforce the meaning of an interaction and a product's emotion and personality. They are also used to call the user’s attention. For example, when you select an item in a list, a sound click is played to reinforce the action and create a bilateral dialogue between user and application.

I have noticed that sometimes these three categories overlap. Sounds should be used together with visual graphics. You shouldn't rely only on one or another. Sounds are a transient medium, and graphics are stationary.

However, sounds can become prominent in certain contexts (depending on environmental factors). For example, when we can't look at the screen, a sound notification is the only thing that can attract our attention.

Another important thing to keep in mind is the frequency of the event tied to the sound. It is best to consider how often the user will hear the sound in the application. It's essential not to overdo it, which could create an annoying experience.

UI/UX sounds are still a new and exciting topic if you want to focus on something different in the UX area. Like other subjects, the best way to learn this one is to observe how other developers implement it and, of course, get your hands dirty.

Here are some useful free libraries you can use to play with sounds:

I have also created a small example here. The code is available on my GitHub.

If you use a JavaScript framework, the process of adding a sound to a UI is simple. You import the audio file, declare a node based on the Audio Web API, and then attach it to an event, like a click on a button.

If you know of any implementations of sounds in UI worth checking out, please mention them in the comments, and don't forget to check my other posts about UX and UI engineering.

This post is part of a series about UX and UI engineering.

Photos by Parker Knight from Pexels, and Steve Harvey and Soundtrap on Unsplash.

Networking for software developers

Tiago Costa — Tue, 21 Jul 2020 18:50:03 +0000

We're at breaking point. Careers are on hold, professional relationships are being reevaluated, and many software developers are losing their jobs.

At times like this, networking becomes essential if careers are to be put back on track. But how do we network, when meetups and hackathons and in-person conferences are being canceled? And more: how can we prevent frustration when, after making an initial networking contact, nothing results from it?

The answer to these questions becomes straightforward once you consider the human element in networking. Putting first things first, networking is a process, not an event. To be more precise: it is a long-term strategy of building relationships.

You have probably seen this mistake many times. People don't contact anyone in their professional network for a long time, and then suddenly appear, asking for a job.

If you start an initial networking conversation with: "I was laid off. I need a job," then frustration on your part will probably follow. Asking for a job in a first networking conversation is like proposing marriage on a first date. It puts people off.

Networking is not about you and your job. It's about relationships, projects, and ideas. Try an experiment. Make a cold approach to someone and talk about your resume. Approach a second person, show some curiosity, and talk about ideas and plans. You will see a difference in the responses.

In fact, when you network, you are unlikely to see tangible results for months or even years. So don't be disappointed if you don't get instant results from an initial conversation, or from a second or third. Networking is about nurturing relationships. It's about planting seeds. Keep that in mind and you will have no reason to become frustrated.

Also, you don't necessarily need to attend in-person events to build your network. There are great online communities such as DEV.to, and Slack channels where you can start to set the stage and talk about your projects and ideas, and about people. With resources like these, and with Zoom calls here and there, it is easy to show authenticity and your personal side to colleagues. This will be to your benefit, since authenticity and personality accelerate the process of building relationships.

By the way, this networking strategy can also be applied to the world of open-source contributions. I have seen developers become frustrated after making a contribution to a project, expecting (but not receiving) some kind of instant recognition.

That's not how open-source contributions work. It takes time to be recognized by other developers. It's a process that requires you to demonstrate mastery, trustworthiness, and respect.

Before sending a message to your professional contacts or starting an initial conversation, remember that networking does not differ from other relationship-building activities. It is a long-term process requiring patience, curiosity, and authenticity on your part. Let your relationships develop naturally, and you will not be disappointed.

Photo by nappy from Pexels

Books that changed my life as a web professional

Tiago Costa — Thu, 21 May 2020 02:41:55 +0000

People frequently ask which books I like to read, so I have decided to share a few that have influenced my life as a professional. None of these books are about coding or web development; rather, they are about digital culture. This is valuable for professionals who want to think beyond coding, frameworks, and libraries.

I still find these books inspiring. I read them at different moments, and I hope that you—whether you are a professional, a beginner, or a senior—will find them inspirational, too.

1) Interface Culture, by Steven Johnson.

Johnson provides a historical perspective for the web interfaces, comparing the UI (user interfaces) to the architecture of great cathedrals of the Middle Ages.

Among other insights, Johnson highlights how architecture influences the way people interact and perceive a building. In the same manner, the way you structure the UI can change how people act with your product. In other words, the influence of the web on our daily lives and culture can be complex and profound.

2) The Unfinished Revolution: Human-Centered Computers and What They Can Do for Us, by Michael L. Dertouzos.

I love all the material produced by Dertouzos during his almost 30-year tenure as a professor at MIT. In fact, he was my inspiration to pursue some studies there.

Before the UX wave, Dertouzos advocated that we shouldn't separate computers from humanism. For him, the "digital revolution" would start only when people found using computers as natural as using an oven or refrigerator. When you use an oven, you don't think how it works; you just use for a particular purpose. Computers should work in the same way, serving us and not enslaving us. Humans— not computers—should be the focal point of the "digital revolution".

For UX people or technical professionals who want to acquire a human approach, this book is truly inspiring.

3) The Year without Pants: WordPress.com and the Future of Work, by Scott Berkun.

This book is more relevant than ever during this disruptive time when companies are being forced to embrace distributed and remote work. One conspicuous effect of the COVID-19 pandemic is that it is making us question how we work.

Written seven years ago, it illustrates the feasibility of having a company where employees worked entirely remotely and are located around the world. In this case, the company was Automatic, who runs WordPress.com.

I liked this book because Scott Berkun gives an enjoyably human perspective on the topic of remote work. Berkun worked for Wordpress.com as a team manager, which means that there is a personal point of view in the book:

"Much of what bad managers do is assume their job is simply to find new things to jam and new places to jam them into, without ever believing they need to understand how the system—the system of people known as a culture—works (...) In my story so far at WordPress.com, every employee I met was smart, funny, and helpful. They’d invested heavily in tools and systems but put the onus on employees, even new ones like me, to decide how, when, and where to do their work. These attributes of culture didn’t arrive by some technique sprinkled around the company years after it started."

Photo by Element5 Digital from Pexels

Frameworks and libraries come and go. Self-learning skills stay with you.

Tiago Costa — Mon, 16 Sep 2019 04:45:16 +0000

Here's how it is: half of what you learned five years ago is now irrelevant.

For those of us on the front lines of IT, this is not news. We need to skill, re-skill, and re-skill again, all the time. However, the ever-shortening lifespans of such skills has thrown up a new requirement: the ability to be a self-learner.

Sorry, but there is no bootcamp or master's degree or code lab that will enable you to update your skills constantly. You have to be, or to become, a self-learner.

Self-learning requires us to have a commitment that traditional schools don't teach. Being hungry to learn, to develop focus, and to motivate ourselves are topics that we don't see all the time in schools.

In the end, learning by yourself is about being a student and a teacher at the same time. If you're comfortable with the idea of being apprentice and mentor (junior and senior developer) simultaneously, you will probably be able to thrive in these present times, and re-skill many times.

By the way, learning is at the very center of a developer's career. How many of us at some moment in our careers have quit a job because we were not learning something new, or not learning fast enough? I have done that at least three times - quit jobs because I wasn't learning or even becoming better at what I was doing. Learning is crucial in a career in web development.

I recently read The Science of Self-Learning, by Peter Hollins. This book has helped me to make the best use of my self-learning skills. Here are some of my notes. To be a self-learner, you should pay attention to three topics.

1) Develop self-management and motivation

If you doubt you have the discipline to learn by yourself, don't overthink it. We are conditioned not to learn by ourselves. You were conditioned to learn by fear, and to wait for someone to tell you what you must learn, and when. Maybe this is the main difference between traditional learning and self-learning - knowing how to motivate yourself.

The best way to develop self-management is to think like a scientist. Before starting an experiment, a scientist will make a plan, writing down the hypotheses, materials, and methods that will be used to arrive at conclusions.

In the same way, before you start studying, ask questions, take in the big picture before diving into the content, try to reflect on what you're going to learn, keep track of your accomplishments and expectations, and always review what you just learned.

2) Interact with information

Play with the information you want to absorb. Use analogies. Look for patterns. Compare what you're learning with things and skills that you already know. Teach a friend. To sum up, play like a child with the information and skills you want to master.

3) Have a methodology to take notes

When you study by yourself, you can't organize everything in your head. You should learn how to take notes. I didn't know this, but there are many note-taking methods. One of my favorites is the Cornell system.

By the way, taking notes is a good way to discover blind spots in your knowledge. Note-taking is a kind of self-explanation. If you are unable to explain something, probably the concept is not clear in your mind.

From my experience, self-learning is one of the best instruments for developing confidence as a developer. I will tell you the truth - it can be frustrating and hard sometimes, but the benefits will last a lifetime. They are also of wider use than you may realize; the self-management skills you develop during your studies can also be applied in other areas of your life.

That's why, when I am participating on a hiring committee, I'm most interested in a candidate's self-learning skills. I want people in my team that will keep up with the pace of change. After all, frameworks and libraries come and go. Self-learning skills stay with you.

Photo by Tim Mossholder on Unsplash

Being optimistic in UI

Tiago Costa — Thu, 05 Sep 2019 17:37:46 +0000

Optimistic UI is not a new thing (games developers work with the idea of client-side prediction for a long time), but the concept has been gaining a lot of attention lately.

The idea is simple. Based on a user action, an interface is updated, even though a request to the backend may still be pending. In the end, an optimistic UI is nothing more than a way to manage perceived performance and avoid loading states.

The workflow can be straightforward in React.

Capture a user action (click a button, for example).
Update the local state, which updates UI.
Send the request.
Get a response.
If negative, rollback update the local state (step 2).
If positive, do nothing or confirm step 2.

Eliminating small lags from the UI interaction seems to create a faster and much more responsive perceived user experience. However, there are some drawbacks involving optimistic UI.

First, optimistic UI is not a one-size-fits-all solution. One crucial point is that if there is a failure in the server (false positive), the UI update should be reverted graciously, and this is difficult to achieve if the action triggered by the user plays a role in the application's routing.

Plus, since there is the risk of false positives, optimistic UI doesn't seem a good idea for checking for an air flight or a cash transfer experience. Imagine saying to the user that this cash transfer was reverted.

On the other hand, for actions that are not so important (like a post or posting a quick message, for example), optimistic UI seems OK.

The second point is that optimistic UI works better with actions that generate boolean values (true or false, yes or no), things that, in case of false positive, can be easily reverted.

In my experience, the most critical point of the technique when something didn't go well is making it noticeable. Handling UI errors is very important. The interval between the action and the error message couldn't be more than two seconds.

I created a small app that shows how optimistic UI can be implemented. As soon as you answer one of the questions, the UI is updated, even though the request is still pending. The app can be seen here, and the code is here.

This post is part of a series about UX and UI engineering.

Photo by Brooke Cagle on Unsplash