Inspiration and topics discussed in our MB.io tech community in January

Also in 2023, we would like to share with you the news that is being discussed in our tech communities. You will surely find some inspiring topics.

Framework or not

Write reactive components without frontend frameworks. Should you be using a framework or not? Here at MB.io, we’re always taking a serious look at this topic. Let’s put the hype aside for a moment. You can write reactive components without relying on a frontend framework. Frameworks provide a more straightforward way to write web apps. React, SolidJS, Svelte, and Lit all offer this. The article explains the features and how the various frameworks works, as well as the associated costs.

Get rid of Pre-commit hooks

This video has met with much agreement from our developers. Pre-commit hooks block frequent code commits of intermediate work. This blocks productivity on the developer’s machine. It is better to run tasks on the server where you check for general linting rules or similar. The pull request serves as your final quality gate.

CSS pseudo-classes

The browser support for the new CSS pseudo-classes has risen sharply in the year 2022. It’s time to look at their benefits. Kevin Powell explains them in an insightful way in his video. Covered are :is(), :where() and :has(). Using these makes writing rules easier, and more manageable. It also changes how specificity behaves.


Chrome DevRel Team top Core Web Vitals recommendations for 2023 In the new year, have the resolution to make your websites more pleasant to use for your users and work on the performance. The Chrome DevRel team answers this question in the article: “what are the most important recommendations we can give to developers to help them improve performance for their users? They name the most important levers with explanations and suggestions for implementation.


SVG Reference

If you want to learn more about SVGs and their possibilities, have a look at this Interactive SVG Reference. You can learn what and how to implement it. After going through it, take a look at the collection of color tools and free SVG generators.


input type=”number”

This article follows an interesting discussion of the input type=”number”. In a detailed explanation of the problems, which the use of the input type number brings with itself, you learn which things you must pay attention to.


Just

Just, a Command Line toolkit for developing Spring Boot applications With features like Live Reload, Docker support, and with a single command, you can run anything. It’s worth a look.


Articles from Mb.ioneers

Our colleagues have also been active in writing articles recently.

Javier shares with us the first part of his article series on improving documentation. Read it, get inspired, and improve your product documentation in a structured way.

Miroslav shares his experience of switching to Raycast and how it boosted his productivity.

In addition, Vladimir has written an article about Microfrontends with Import Maps.

Thanks to all who share their knowledge in our company in this way and use our communities to exchange ideas. Stay curious!

(Image by Theo Eilertsen Photography on Unsplash).

Improving Your Development Documentation Project (1 of 3)

What this article covers
First steps on how to improve an existing documentation project.

Tools
Confluence, GitHub web and desktop versions, and MarkdownPad2.


Introduction

Developer Documentation is a curated set of files describing all the active workflowssetupstoolsconventionsbest practices, and How-tos of your software development product. Through this article, I will refer to it as “documentation” or “docs”.

Documentation supports your team members in their daily and future developments. It also helps new joiners to reach cruise speed during the onboarding period. But to do so, your documentation must be up-to-date and well-structured.

Keeping the docs up-to-date and in good shape requires resources and dedicated time. Yet often our project time or budget constraints prevent us from taking care of our docs properly.

This series of articles aims to serve as a documentation improvement guide.

Know Your Ground

Step 1 – Organize Your Improvement Project

Developer documentation has to be visible to increase the chances of success, and to find collaborators (to improve it). To do so, keeping a space to visualize, describe and track your improvement project is a useful idea.

Use your teams/company collaboration tool for that purpose. For this article, we’ll be using Confluence.

Space Structure

The structure of an improvement project may differ from one project to another. Take the following space structure as a reference that you can adapt to your needs (then iterate!):

Space NamePage NameChild PageDescription
[Your Documentation Project´s Name]Name of your documentation project.
OverviewExplain briefly the What, Why and How of the documentation.
DashboardCentralized page to easily access all project pages.
AnalysisMedia and results of documentation analysis.
RoadmapVisualization of the estimated dates to implement each improvement.
Improvement ProjectCommunication GridContact person by topic.
Improvement PlanImplementation phases and items.
Coordination MeetingsGrid to align with your manager or collaborators (Optional).

Once your improvement project space is set up, you are ready to:

• Present it to all your team members, including Product Owners and Scrum Masters.
• Track and show your progress.
• Visualize documentation issues/blocking points.
• Access all your project resources.

Tip: Explain how documentation issues negatively impact teams´ performance. It will help Product Owners and Scrum Masters to understand and provide your project with the resources you need.

Step 2 – Identify Your Documentation Issues

Identifying your documentation issues means spotting all the types of issues living among your docs. Some documentation issues are:

• Grammar, spelling and syntax errors.
• Confusing/Not logical page structure.
• Unclear/Verbose text.

In the following table, you can learn a little more about the main documentation issues:

Documentation IssueFix strategy
Grammar, spelling, syntaxUse a text checker to support your writing. Some good options are GrammarlyHemingway or QuillBot.
Page structureReview your page structure. It shows the logical flow of the information contained according to the objective of the page, for example: IntroductionPrerequisitesFirst StepWorking with…/Available Features.
NamingDefine a naming strategy for page titles, sections and subsections.
Page elementsStandardize the use of the following elements: lists, tables, tabs, notes, collapsible elements and images.
Text unclear or too verboseBe concise.
Random text formattingStandardize the use of bold and italics for files, folder names, code snippets and code elements (functions, objects, methods, parameters, API names, etc.).
Too many topics on a single pageStick to “One topic per page”.
Unnecessary screenshotsUse screenshots or images ONLY when strictly necessary. If you can explain it briefly, do not use screenshots.
Type of notesStandardize each type of use case for notes (Info, Help, Warning, etc.).

Now we can start to target and record the issues of our documentation. The following table will help you to perform that task:

Nav OptionPageSectionSubsectionIssueLink
Add nav. option namePage numberSection nameSubsection nameIssue name

Depending on the size and complexity of your documentation, targeting these basic issues may take a while. Take the chance and join me on the journey to better documentation and improve your documentation project now.


To Be Continued…

What’s Next?
In the second article (2 of 3 article), we describe how to run a user survey to gather useful feedback from your users/readers. This invaluable feedback will help us prioritize the documentation issues to fix first.