DEV Community: David Hermoso

Remote working: team and company culture

David Hermoso — Thu, 03 Dec 2020 00:02:01 +0000

Many companies had to move remote this year 2020 due to the COVID pandemic.
But remote working is not just picking up your computer and going somewhere other than the office.
In my humble opinion, and after years of remote working, it's not as easy as that.

I'm not talking about work from home, but about the concept of remote working:
Distributed teams across the world, different languages, cultures, timezones, work schedules, etc.

Remote working should imply a communication skills learning process.

The following are some of the things anyone working remotely should take into account:

Communication is asynchronous, especially when team members work at a different timezone than yours. It implies the team should be organized to reduce dependencies or to tackle these time gaps.
Meetings should be scheduled if the topic to discuss is not urgent:
Attendants will be able to prepare the meetings, reading the topics to talk about, investigate, find out if someone else should attend, etc. in advance.
Meetings, especially daily updates, should have a fixed duration and shouldn't be exceeded. Otherwise, it's difficult to focus on the topic of the meeting.
Reading and learning about the culture and the country of your teammates is a good idea: You will be able to understand better your teammates. And it always leads to a better, more inclusive, and diverse team.
Physical meetings, team buildings, etc. are important to create a great company culture and to keep the teams joint.
(I know We are in a global pandemic, so this one cannot be applied now)
A quick call is a much better idea than writing 15 comments in a pull request or a chat conversation.
And by the way, the tone of a written message is easier to be misunderstood.

Again, that's just my opinion and my experience.

How to show (Angular) components in specific order according to a backend configuration

David Hermoso — Mon, 08 Jun 2020 15:23:36 +0000

UPDATE: ⚠️ This is an awful idea for accessibility.⚠️ 🤭

It's a terrible solution for accessibility because things are being rendered in the screen in an absolutely different order as they're written in the HTML code.

So screen readers, tab navigation, etc. is different to what users may be seeing in the screen.

So it's wrong.

In any CMS you can configure your content to appear in a specific order,
so you don't need to code in order to change how it's rendered.
Last week, I faced that issue in an app I'm working on: I had some Angular components and I wanted to be able to sort them in a different way, according to a BE configuration.

Why you would do that?

Let's guess you are building a Learning platform. You have a results page with some filters.

So users can filter the courses to find the ones more interesting to them.

Basically, making the filters sortable is a business need:
Some specific reasons:

A/B testing
Same code, different brands, different kind of customers, and different configuration
Different sorting configuration according to courses search result
Highlight new filters at the top

The requirements

Configuration needs to be easy to understand just taking a look at it
If there's no configuration in the BE, components must appear how they currently are (written in the HTML).

The solution

If you want to avoid reading the whole post, that's the solution:
I used Flexbox order property.
The parent containing all the filters must be a flexbox element and flexbox direction must be column.
You can do that using the CSS properties:

display: flexbox;
flex-direction: column;

I get a configuration object from the backend side, containing the order of every component.

sortableFilters: {
  price: 0,
  language: 2
  rating: 1,
  duration: 3,
  difficultLevel: 4
}

I apply a style.order in the template to every component:
[style.order]="sortableElements.OrderId".

And that's it. But there's a bit more to tell, if you want to keep reading.
You can read more about Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The configuration: It needs to be easy to understand

The configuration needs to be easy to understand for a content manager that does not need to know how the frontend is done (that by the way, can be changing).
And the configuration needs to work for a web client, but it needs to do so for any other client (Android, iOs, etc).

In Flexbox order property, the bigger the number, the lower the element appears.
Guess We have the following configuration in the backend (coming from a CMS or whatever) side:

{
  price: 0,
  language: 1
  rating: 2,
  duration: 3,
  difficultLevel: 4
}

Price filter would appear in first place, Language filter in second place, and so on.
I don't think it's an intuitive configuration.
If you don't know how the front-end side is built, it seems to say:
"More number, more priority. So it will appear closer to the top".
So... Why the person setting up it needs to know how the Frontend is built?
I don't think it's the way it should work.

I reversed the data, not the content.

So my solution was to reverse every configuration number to its negative if it's greater than 0.
I reversed them in the frontend side because it's done because of the style. It's not something to be done in the backend.
In Angular, I'm doing it in the service, before the component gets the data.
The observable of the filter order configuration will emit with the numbers already in negative.
Note: In Angular, you should not manage data in components, but in services.

public getFiltersOrderConfiguration(): Observable<FiltersOrderConfiguration> {
    // In the real world this would be a HTTP call.
    return this.demoService.filtersOrderConfigurationBehaviorSubject
      .pipe(map(this.turnFiltersOrderConfigurationIntoNegative));
  }

private turnFiltersOrderConfigurationIntoNegative(filtersOrderConfiguration: FiltersOrderConfiguration): FiltersOrderConfiguration {
    for (const filterID in filtersOrderConfiguration) {
      if (filtersOrderConfiguration[filterID] > DemoService.DEFAULT_FILTER_ORDER_CONFIGURATION) {
        filtersOrderConfiguration[filterID] = filtersOrderConfiguration[filterID] * -1;
      }
    }

    return filtersOrderConfiguration;
  }

So, this way, the configuration in the backend can be:

{
  price: 4, // More important / Closer to the top
  language: 3
  rating: 2,
  duration: 1,
  difficultLevel: 0 // Not configured, indeed.
}

And the frontend will have

{
  price: -4, // More important / Closer to the top
  language: -3
  rating: -2,
  duration: -1,
  difficultLevel: 0 // Not configured.
}

This way, the filter components will be displayed in the following order:

Price
Language
Rating
Duration
Difficult

Why you turn into negative?

So every order number will be negative if it's been set up in the backend side.
I could avoid it to be turn into negative using flex-direction: reverse-column; instead of flex-direction: column.
It would show the filters reverse to how they are written in the HTML template.
Adding a component to the bottom of the template, would lead in a new component at the top.
And I think that's quite weird and not intuitive for the developers maintaining the code after me.
So that's basically why I turn every configuration number into negative.

Conclusion

I wasn't sure about this solution, but I did not find any other working for my context.
I was trying with Angular dynamic components.
And they could have work, but they're not there for this use case.
And every filter emits its own output event , and gets its own input properties, of different types.
So using dynamic components led in a mess of code impossible to maintain and close to modifications.
Read more about Angular dynamic components here: https://angular.io/guide/dynamic-component-loader

I built a simplified example:
Demo: http://demo-angular-sort-components.s3-website.eu-west-3.amazonaws.com
GitHub repo: https://github.com/jdavidhermoso/show-angular-components-sort-configuration

NOTE: That was my solution. If you think there's a better solution and you want to discuss it, you can ping me at:

5 ideas to encourage/help your team to collaborate, innovate, keep learning, have fun and solve real world issues.

David Hermoso — Sat, 06 Jun 2020 10:22:58 +0000

These days I thought how can We encourage the team to collaborate more, share knowledge, improve processes
and make your team mates make the work more enjoyable etc.
The culture of a company is built by the people working on it.
Whether the teams are inclusive and diversity friendly depends on the company policies, of course,
but at the end of the day, it depends on the people working on it.
So Prior to the 5 ideas I'm gonna share, there are a lot you can do
to make the team inclusive and diverse.
And that's fair more important than any of the tips I'm gonna just share.
Among other things, because diverse and inclusive teams build better products, are more innovative,
and have happier members.
So please, focus on inclusion and diversity first.

There are tons of ways to help your team to collaborate, innovate, keep learning, and enjoy the work, but I think it's important to come up with specific actions in order to make them happen.
So these are just some ideas for you to try, improve them or adapt it to your own company and check if they work for your own specific context.

1. Make a demo of your PR's:

PR's (Pull Requests) are absolutely
essential. There's a lot said about them, so there's no need to
tell more.
But behind the code, there are business needs (that is, by the
way, at the end of the day, why We are building software
solutions): New feature, bug fixes or a feature change.
Building a demo, deploying to a dev environment and making a
quick call to show how the change works to the team can help a
lot.
Benefits:

Team members keep up to date to latests changes.
Find edge cases or bugs. (Prior to send it to QA)
Ensure you didn't miss something you didn't know about the business. Specially for big or multi-brand apps.

2. Present something once per week / month to the rest of the team:

Basically, knowledge sharing. Present something to the rest of
the team.

Not mandatory, but scheduled in the team's calendar. Otherwise, it won't happen.
Some ideas: A new technology, refactor ideas for the project, new features of the framework(s) / technology(ies) / language(s) your company / project is using. Or just showing a
45 min. as much to avoid making it boring
Content is what really matters. Not the beauty of the slides. So invest preparation time in rich and clear content, not in fancy slides.

3. Ask (other) teams members which manual tasks can be automated:

You could ask to your user support, sales, copy-writing, QA or
design teams members what manual (annoying) process they do
every day.
Or maybe you can find for them a tool.

Benefits:

Increase innovation in certain areas of the company
Make your team members in other areas happier and more productive
Reduce chances of errors. Manual tasks can lead to errors.
The development team can learn more about how the company works and the business needs.

⚠️ ⚠️ ⚠️
However, be careful:

Maybe it's not worth to automate a 2 min task.
If you build a software solution / script / whatever, some team will have to maintain it.
You have to write clear and accessible documentation and let the rest of the team know about it.

4. Have a (your communication app) channel for articles/courses/talks sharing and have channels for different technologies:

Have channel in (your team communication app) will help sharing knowledge.
Also, having channels for different technologies can help to make it easy to find and read information.
Like frontend and backend channels, or Java and Javascript channels, or Angular and React channels, etc.
It depends on your company.

5. Encourage your team members to attend (tech) conferences, meetups, talks, etc.

It clearly depends on everyone. Rest on weekends or after work, and take care of your family and friends it's so important.
So respect your team members if they don't want to attend tech conferences.
But you can encourage yout team to attend (tech/comic/ some other fun thing) conferences, meetups, events, talks in your city or even outside it. It can be a great experience. You all can learn, networking with other developers or communities, or just have fun together for one or two days.

Conclusion

I just tried to share some ideas based on my experience as web developer. I hope they help you in your own team and company.