We’re both frontend developers in the web industry, working alongside PHP and .Net developers. Both of us have found the Umbraco community to be engaging, collaborative and vibrant which has helped pique our interest in working more directly with the Umbraco CMS.
Wait? Frontend developers, did you say?
Yes! Our backgrounds are very similar as we both have a foundation as Digital Designers working in small agencies before we moved on to more technical roles. Our early experiences largely consisted of combined design/development roles, which didn’t include a CMS component, and this has shaped how we both approach our work today - even when working with code.
Sian started using the Umbraco CMS purely as an editor in 2012 which consisted of copying and pasting content for a client into the CMS. It was during this time that she became interested in how the CMS integrated with the static templates and became a part of the structure of the website.
“I thought that to code I had to be interested in server stuff and I had no interest or intention of learning how to set up databases etc. so I feel extremely lucky that I had great mentors who encouraged me to expand my skill set and learn about the Umbraco CMS.”—Sian
“In previous roles, I was creating static templates and then passing them off to other developers to integrate with various systems on both PHP and .NET platforms. I then learned a few tidbits in various back offices to help support existing customer sites, which piqued my interest enough to make me move into a more development-focused position. At Spindogs I’ve had the wonderful opportunity to expand that knowledge into primarily and actively working with Umbraco CMS.”—Emma
The Struggle Can Be Real
As visual people, it can sometimes be tough for us to try and think in programming ‘speak’. It’s fairly easy for us to imagine how a particular animation should look, for example, or look at something on a page and know that it needs adjustments to padding or margins and make fairly accurate guesses as to how much. We can visualise how that will look before we do it without too much of a problem. But if we want to achieve something in MVC that isn’t always obvious - that kind of thinking doesn’t come quite so naturally.
Impostor syndrome is something that both of us have experienced during our journey with Umbraco. It often feels like because we are working with .NET software, that there is an expectation that we understand jargon and programming concepts that we are not used to working with. Being faced with a blank template file can be daunting when you’re not really sure where to start - and when you are working with a back end developer who makes things look really easy that can actually contribute to feeling out of place and like we don’t belong in that space. All of these people know what they’re doing and have brilliant, analytical, mathematical whizz brains. So what are we doing here, slowing everyone down?
The thing that we’ve both learned - and at times are still learning - is that our differences are what makes us valuable. We look at things in a different way to many of our colleagues, and we have our own ideas that we can bring to the table which in turn may not come so naturally to backend developers. Both of us enjoy the following quote from Neil Gaiman who (believe it or not!) has experienced impostor syndrome himself:
“Some years ago, I was lucky enough to be invited to a gathering of great and good people: artists and scientists, writers and discoverers of things. And I felt that at any moment they would realise that I didn’t qualify to be there, among these people who had really done things.
On my second or third night there, I was standing at the back of the hall, while a musical entertainment happened, and I started talking to a very nice, polite, elderly gentleman about several things, including our shared first name*. And then he pointed to the hall of people, and said words to the effect of, “I just look at all these people, and I think, what the heck am I doing here? They’ve made amazing things. I just went where I was sent.”
And I said, “Yes. But you were the first man on the moon. I think that counts for something.”
And I felt a bit better. Because if Neil Armstrong felt like an imposter, maybe everyone did. Maybe there weren’t any grown-ups, only people who had worked hard and also got lucky and were slightly out of their depth, all of us doing the best job we could, which is all we can really hope for.”
—Neil Gaiman
Over the years, it has definitely helped that we have had such supportive .NET colleagues because without them, we wouldn’t have been given the opportunity to learn, grow and pass on knowledge to other peers. Training is another way that helps validate and extend knowledge in any field - we are both big advocates of that.
The Benefits of Training
Emma started her Umbraco journey with in-house training from Sian, before taking the Umbraco Fundamentals course in April this year. “The training that Sian provided was invaluable to me as someone completely bewildered by what I was getting into. It provided a good foundation to build upon, and the rest has largely been learning on the job from colleagues (and Google) with Sian’s support and that of our great .Net team. I’ve wanted to undertake some formal training for a while and the Fundamentals course was extremely valuable in that I not only learned new things and new ways to do things, but also felt validated in that what I had already been doing was right. I actually understood everything and ended up passing the exam with 100%. This has done great things for my confidence!”
Like Emma, Sian began in-house training a long time before doing the Umbraco fundamentals course in 2017. Training often solidifies best practices and boosts confidence in your abilities so we definitely recommend doing the courses if you haven’t done them already.
Eye for Detail
Every frontend developer would say that our role is as creative as it is technical, sometimes even more so. We use frontend frameworks and methodologies to craft the best user experience. It’s therefore extremely important to have an eye for detail and this characteristic also benefits us when it comes to building a CMS. Backend developers tend to be more analytical which is great for problem solving, integrations and building cool features but frontend developers bring the visual element into the mix and we help with the aesthetics, much of which may seem like small things but is important for a positive user experience.
Sian recently completed her certification in Extending the Umbraco Back Office and was pleasantly surprised to see that one of the first modules was about applying icons and adding descriptions to document types. Being visual developers, this was one of the first things that we both learnt how to do in the Umbraco Back Office and we most likely take for granted. It’s one of the first things we think about customising, and we just know how to do it effectively in order to contribute towards an awesome user experience. An icon which represents a document type, and colour which coordinates with a brand can make the content area so much more attractive to use, and easier for the editor to navigate. Likewise, a brief description on a property about what you can expect it to do on the frontend can really help a content editor out, and often results in less questions being asked around what properties in the CMS do on the frontend of the website.
We have also found that it can be extremely beneficial being able to work on the CMS subsequent to the frontend build. Translating HTML into Razor is a skill in itself and if you’ve written the code in the first place, it’s far easier to ascertain how something should functionally work in a CMS. Having had an understanding of the website from the point of handover from design, we know if something doesn’t quite look right once it’s been moved from static files to a template, and can fix it right away.
Properties we Love
One of the properties that we use a lot in our builds is Nested Content. This enables us to create what we call “flexible content”, which are blocks which can be placed on the page any number of times, and in any order by the client. These blocks are designed with this in mind so that visually they appear attractive regardless of the combination, and may encompass text blocks, images, tabs, videos, carousels, etc. One of the things that we always make sure to do is to include an extra label field, and include this in the Nested Content template so that the content editor can add this for their own reference within the CMS, making it much easier for them to manage. It’s also a great case for remembering to add those icons, as then choosing the document types to add becomes a breeze for the user.
Both of us have also recently learned about the new Block List - Emma in her Fundamentals training, and Sian in her Extending the Umbraco Back Office. We’re both looking forward to learning more about this one and putting it to use, especially as we will be able to customise its look and feel for the CMS user and create an even greater experience for them.
Taking the Initiative
This year, Sian and a colleague, Nik Rimington (Umbraco MVP) have started an in-house Umbraco Initiative at Spindogs to encourage outreach amongst colleagues into the Umbraco Community, develop people in their roles and most importantly to have fun with the CMS. So far, we have 5 core group members and growing interest in involvement. The initiatives activities will range from coding, through to blogging, and public speaking.
Some activities will be purely internal, such as being responsible for our Umbraco CMS base build configurations and maintenance, creating reusable plugins and helping upskill Spindogs team members. Others would be externally orientated, such as blogging for Skrift (hehe), speaking at Umbraco meetups, creating public Open Source Umbraco packages which will be released under the Spindogs brand, and contributing Pull Requests to the Umbraco core. Overall, the aim is to foster a collaborative and celebratory environment across a range of roles and disciplines. In doing so we hope to eliminate that impostor syndrome for good as we acknowledge that each of us brings our own unique value to the table.
In conclusion, we would encourage any frontend developer even with a passing interest in Umbraco CMS to get stuck in and have a go - even if you don’t understand it at first, there’s plenty that you can get involved with whether it’s creating a cohesive and attractive content editor experience, creating frontend templates or even diving in with a bit of Razor. There’s a lot to learn and discover, and plenty of space for frontend developers to have a huge, positive impact on any Umbraco CMS project.