On being human.

Our team has grown slowly and deliberately from a single person at the start to a nine-person team in 2021. Some things that work well enough on a small team need more thought as the group expands. With that in mind, we are encouraged and continuously reminded from the day we are hired to challenge our status quo and enabled to suggest and adopt changes.

Embracing that opportunity means our internal processes and approaches evolve as each new person joins the team and adds unique perspectives. As a global team, our views are as varied and diverse as the individuals providing them.

We have internal core values and guidelines for working together as a fully remote and distributed team that might be worth sharing in future posts. We have a clear mission, which I’ll share here to save you a few clicks. 

We help information security teams focus on making systems more secure by reducing the overhead of managing and discussing the outcome of the security assessments they perform for their clients (whether these are inside their organisation or outside of it).

Not too long ago, we realized that there is a bunch of info about Dradis out there – how it works, what it does and doesn’t do, how to use it, etc. Still, not much is available to help the community understand the people and company behind the tool. Taking inspiration from companies like Balsamiq, we decided to do something about that gap. Now, we’ve put into words what we believe to share with you and the ideas that give us a yardstick to measure our decisions against. Without further ado:

We are here for the humans. At the end of the day, the work done in infosec is for and about humans. And as messy as humans are, that can make this work frustratingly complicated. Sure, scanning tools and blinking boxes can handle some of it – but pulling everything together requires a human. We are here to make it simpler for you to be human by getting the time sucks out of your way.

Infosec is a team sport. Just like information systems are interconnected, so are the different folks involved in securing them. Sharing clear information and thinking creatively together is often critical to solving the problem at hand, so let’s do more of that well.

Customers + Vision = Roadmap. We don’t have an official roadmap, but that’s not to say we don’t have plans. We’ve got big ideas on how this industry will continue to evolve and how we can best serve you and your customers. That’s why we reach out to our customers and invite your feedback.

It’s your data. You keep it. Whatever data you put in Dradis, is yours, and we like it that way. We respect your privacy and that of your customers like we value our own. We trust that you will let us know how we can improve and make a better product.

These declarations of what we believe are posted on our website so you can revisit them, and new users can easily find them. These beliefs may change as we grow as a team and new voices are added, and as this industry faces new challenges. I hope you’ll help us stay accountable to these beliefs and call us out if you see us not operating consistently to them.

We are human, after all.

The humans behind Dradis

New in Dradis Pro v4.0

Dradis Framework is a collaboration and reporting tool for information security teams to manage and deliver the results of security assessments, in less time and with less frustration than manual methods.

Gateway Themes

One of the biggest changes in Dradis Pro v.4.0 is the move from a single HTML Gateway template to Liquid themes. Create a dynamic, info packed, theme to deliver assessment results dynamically in Gateway using Liquid. Multiple Gateway themes means each project can use a different theme that’s appropriate to the engagement. Two new Gateway themes are included with Dradis Pro v4.0 to get you started.

Liquid has a well supported and documented history for creating robust templates. This will make it easier for teams to create and support their own well organized, customized templates.

Are you currently using a customized Gateway HTML template? Reach out to our team with your existing template so we can help convert it to Liquid before you upgrade any production instances.

Downloadable Assets

In addition to reviewing the results of an assessment dynamically in Gateway, contributing users can securely download assets that have been added to their project. Deliver final reports, scope documents, and other assets directly from Gateway keeping everyone out of their inboxes and project details centralized.

Simple Team Setup

Getting started using Dradis Pro is simple. Once deployed to your environment, the super-admin for the instance is created during the first run and can quickly set up the rest of the team through this new guided walk-through.

Maximum Login Attempts

Configure the number of maximum login attempts to help prevent brute-force attacks on your Dradis instance. The default is set to 3 attempts before the account is locked. Admins can increase or decrease the number of attempts to align with their team’s policies.

Captain Kirk and Sulu are both locked out for entering invalid credentials

Release Notes

  • Projects:
    • Cleanup the New/Edit view
    • Create and remove the results portal from the Edit view
    • Dashboard: Add Default issue entry to menu when project is empty
    • If there is only one RTP, select it by default
  • Setup: new initial Team and User wizard
  • Teams: cleanup the New/Edit view
  • Users: account gets locked after too many failed sign in attempts
  • Upgraded gems: addressable, nokogiri, papertrail, puma
  • Bugs fixed:
    • Better support for characters inside textile linked text
    • Display placeholder text for issue sorting dropdown when no field has been selected to remove confusion about default options that are not yet applied
    • Fix issue library entries action buttons not appearing due to caching
    • Fix revisions with “destroy” event not removed from the database after deleting a project
  • Integration enhancements:
    • Acunetix:
      • Add support for Acunetix 360
      • Make Request and Response fields available at the Evidence level
    • Gateway 🍾
      • Moved project contributor assignment to Gateway management
      • Deliverable upload management
        • Your contributors can now download assets directly from your results portal!
      • Themes!
        • Gateway now supports theme management and the ability to apply different themes to different projects
    • IssueLib entries#index API now supports pagination
    • Nessus:
      • Add age_of_vuln, exploit_code_maturity, threat_intensity_last_28 threat_recency, and threat_sources_last_28 as available Issue fields
    • Nexpose:
      • Update HTML tag cleanup
    • Nipper:
      • Include multiple paragraphs when importing fields.
    • Remediation Tracker
      • Use Datatables for the Tickets#index table
  • Reporting enhancements:
    • Word:
      • Add support for template syntax within resources exported in Word reports
      • Fix exporting node labels with links
  • REST/JSON API enhancements:
    • Update the API to handle pagination
  • Security Fixes:
    • Medium: Authenticated (contributor) information disclosure
      • After a contributor was assigned Gateway access to a project by an admin user they may retain access to the project after the projects team has been changed.

Not using Dradis Pro?

New in Dradis Pro v3.12

Dradis Framework is a collaboration and reporting tool for information security teams to manage and deliver the results of security assessments, in less time and with less frustration than manual methods.

Instance Notifications

All notifications now display at the instance level so you don’t have to open each project to see notifications. These Dradis instance-wide notifications include notifications from updates in Remediation Tracker tickets too.

Accessibility Improvements

Dradis font and element contrast are adjusted to meet Level AA WCAG 2.0 standards. Also, screen reader and alt-text are added and a few broken Aria references and missing labels are fixed. All of these improvements make Dradis easier for everyone to use.

Emojis 🥳

We 💖 love emojis on the Security Roots team and use them all the time working together. 😤 It was frustrating that we couldn’t use them in Dradis, so we added them 🎉! Now you can use emojis in any input field of Dradis to express yourself or within projects details for additional context. 😎

ServiceNow Integration

Create a ServiceNow Vulnerable Item from a Dradis Issue in a few clicks. The new ServiceNow integration allows the owner of the system to receive critical finding details so they can handle remediation outside of Dradis.

Release Notes

  • Add avatar and user’s name to project navbar
  • Comments:
    • Load feed asynchronously
  • Configuration Kits
  • Emojis! Update the database collation to allow emojis
  • Improve accessibility:
    • Add alt text to any linked images
    • Add screen reader only text to forms
    • Adjustments to font and element contrast to meet at minimum Level AA WCAG 2.0 standards
    • Fix any broken Aria references
    • Update element label association & add missing labels
  • Mintcreek notifications:
    • Add notifications dropdown in mintcreek navbar
    • Add project and plugin notifications in the view
    • Authors and contributors will now be notified when assigned a project
  • Replace deprecated font-awesome-sass gem with vendor asset files
  • Rule Engine: include rule name in upload console
  • Subscriptions:
    • Load feed asynchronously
  • Truncate long hostnames when viewing evidence in an issue
  • Upgraded gems:
    • Rails
  • Bugs fixed:
    • Fix attachments base64 encoding for filenames with symbols
    • Placeholder gravatars appear if gravatar is not available
    • SMTP file will take configuration precedence again
    • Update the HelpScout beacon in the instance admin
  • Integration enhancements:
    • Remediation Tracker:
      • Add activity and comment feed
      • Users can now be subscribed to tickets
  • Reporting enhancements:
    • Fix exporting formatting in content controls without Crazy Triangles
    • Fix exporting captions with non-alpha characters
    • Fix URLs breaking textile table formatting

Not using Dradis Pro on your team?

New in Dradis Pro v3.11

Dradis Framework is a collaboration and reporting tool for information security teams to manage and deliver the results of security assessments, in less time and with less frustration than manual methods.

JIRA Sync

Details added to JIRA tickets will now sync back to Dradis Issues and Remediation Tracker tickets making it easier to keep all of the project details together to speed up remediation tasks.

Ruby 2.7.2 and Rails 6.1.1

Sometimes we have to roll up our sleeves and take care of the less flashy bits of development. In this version, it was due time to update Ruby, Rails, and a handful of other gems. There won’t be a noticeable difference on your side but this sets up the team to make future improvements.

Improved Caching

When the projects listing or Issue Library contained thousands of entries, it became slow to load and in some cases wouldn’t load at all. This update improves caching to make it much faster to load those long lists.

Release Notes

  • Upgraded DradisPro to run on Ruby 2.7.2 and Rails 6.1.1
  • Add view hooks for the export view
  • Increase secondary sidebar width for medium viewports
  • Projects page: Add caching to speed up slow loading when thousands of projects are present
  • Upgraded gems: bundler, papertrail, rails
  • Bugs fixed:
    • Correct position of sticky editor toolbar in fullscreen source view
  • Integration enhancements:
    • Integrate JIRA ticket/status details into Remediation Tracker
    • IssueLib: Add caching to speed up the issuelib table when thousands of entries are present
    • Add remote JIRA Comments to Issues#show and Tickets#show
  • Security Fixes:
    • Medium: Authenticated (admin) persistent cross-site scripting in Business Intelligence Custom Properties search

Not using Dradis Pro on your team?

New in Dradis Pro v3.10

Dradis Framework is a collaboration and reporting tool for information security teams to manage and deliver the results of security assessments, in less time and with less frustration than manual methods.

User on, User off

Users can be toggled between disabled and re-enabled. Disabled users cannot access the app, aren’t available to mention in comments, and will not receive notifications. Content from disabled users won’t be deleted and they will need to be re-enabled before modifying any permissions.

Bye for now, Bones

Word Report Export Tune-Up

Bunches of things happen under the hood in Dradis when you are kicked back waiting for the magic to happen to generate a Word report. Some of those inner workings got a tune-up to get Dradis in a better position for future improvements in this version. Imagine how excited we were when we saw some small performance gains as a byproduct of this refactor!

Fancy Output Logs

Export log files are not only fancier looking, but the updated formatting makes them much easier to review. Indents indicate nested items and coloured lines of text are a snap to scan to keep an eye out for any problems and when items finish successfully.

So Fancy!

Change Project Owner

“Change is inevitable” and now, you can change project owners in Dradis. Project owners can be updated in both the web app on the “People on the Project” and through a new API endpoint.

Spock is the project’s new owner

Release Notes

  • Disabled users enhancement
    • Allow admins to disable and re-enable users and contributors
    • Removed disabled users from comment mentions list
    • Stop disabled users from receiving notifications
  • Main sidebar improvements:
    • Labels added under icons
    • Removed animations and transitions while expanding and collapsing
  • Migrate bootstrap to v4
  • Navbar dropdown menu’s are no longer locked to the right side of the browser
  • New item menu in sidebar: isolate Default entry (from template) with a divider
  • Update logo assets
  • Project owners can now be updated
  • Bugs fixed:
    • Christmas easter egg Santa hat blocking clicks on input element plugins
    • Rules Engine: make sure tag auto-complete works on page render
  • New integrations:
    • dradis-nipper
  • Integration enhancements:
    • Allow viewable image attachments for Gateway contributors
    • IssueLib: ability to seed with the starter set
  • Reporting enhancements:
    • Performance:
      • Re-work Word export processing top to bottom
      • Faster hyperlink processing
      • Faster numbering processing
      • Faster screenshot processing
    • Remove unused nested content controls from all resource types (issues, content blocks, evidence etc.)
    • Introducing the new and improved servicesEntries and ServicesTable content controls with full support for filtering and sorting
      • When nested inside a Node control you can get direct access to Services attributes with a servicesEntries control, and child attribute controls eg. Protocol, State, Port, etc.
      • The existing services control that produces pre-formatted table-based data can now be labeled ServicesTable in your template
    • Enhance report export log in both the CLI, and Web Console
      • Indented log lines to enhance readability and make it simple to follow nested processing. ex. Evidence within a Node.
      • Colors! Make use of colours to show
        • Green: when processing is successful
        • Yellow: when filters filter out all resources
        • Red: when something bad happens like a control has no placeholder
  • REST/JSON API enhancements:
    • Add new endpoint to update project owner

HackFu: Community Edition

We are excited to share that we are working with the team at chronyko to present the first-ever HackFu: Community Edition – Friday 29th January 2021 – 9am – 5.30pm GMT.

HackFu is an award-winning immersive learning event designed by chronyko for cybersecurity professionals. Set in a dystopian world in the late 21st Century, participants are tasked with supporting the next phase of humanity’s journey back from the brink.

Participants will each receive a Survival Pack in the post containing items essential to their mission. They will also be provided with access to exclusive pre-event activities to learn more about their mission and the world they will be entering.

The event will run from 09:00 to 17:30 GMT on the 29th January 2021 and will primarily be accessed via web conferencing software and a browser. However, other cybersecurity software and tools (eg a VPN client) will be required to access and complete the technical challenges.

courtesy of the HackFu Website

Check out the full event details at https://chronyko.com/services/hackfu-community-edition/ .

Enter to win a place at HackFu

Think you have what it takes and want to win a place in HackFu courtesy of Dradis? Thanks to all that entered – winners have been notified!

Fixing the Dradis Logo

As a designer, sometimes there are small details that bother me to the point where I need to address them. This time it was the Dradis logo that fell victim to my designer eye for details. A little while ago, I noticed something was amiss with the logo’s 3D perspective. When we started using the logo as the favicon, I noticed that one side appeared to be significantly narrower than the other.

Favicon with asymmetric logo

Additionally, the logo’s current style doesn’t scale well. When the logo is significantly scaled-down we lose the outlines which cause the extruded sides to blend into the top face, skewing the design.

Let’s dissect the logo to investigate and fix the perspective and symmetry problems. While we’re at it, let’s also address the scaling issue.

Investigation

Jumping right into it, let’s take a look at the current logo:

Current Dradis logo

In order to get a better understanding of what is going on with the symmetry, let’s get rid of the ring and isolate just the face of the “A”:

Isolated face of the “A”

Next, let’s add some guides for alignment and straighten it out so we can see if the top and bottom are level:

Straightened “A” with alignment guides

It is already evident that the top of the “A” isn’t quite level. Let’s zoom in to see how askew it really is:

Top alignment with the guide

That’s pretty significant if we are going to be using this for a 3D object. Let’s remember this for later when we look at the X-axis perspective.

Now let’s check out the bottom of the “A”:

Bottom right alignment with the guide

The bottom right looks spot on.

How about the bottom left?

Bottom left alignment with the guide

It’s slightly off but it’s minimal (you might have to click the above image to enlarge it in order to see the misalignment).

Now let’s fill in the missing sections to restore the original shape of the “A” before it was cut out by the ring.

Completed “A” shape

Looking at the A in this state reveals that it’s quite inconsistent. Let’s use Adobe Illustrator’s trusty measure tool to take some measurements:

“A” with measurements added

Look at it! Just look at it! 😭

All of these measurements should be the same. Let’s keep this in mind for later when we talk about the Y-axis perspective.

Additionally, let’s check the inner bottom angles of the “A”:

Inner bottom angles

Oh boy, these angles being uneven means the top of the “A” is off-center and lopsided as if the top was pushed towards the right:

“A” with center guide

In order to fix the symmetry of this shape, we’ll need to make the measurements isometric and equal out those bottom angles. But for now, let’s take a peek at the 3D perspective problems.

This is the logo again reset to its original state:

Original logo

Looking closely it’s evident that the 3D extrusion is not realistic nor consistent. Let’s dive in deeper, I’ll try to illustrate what I’m talking about.

First, let’s start with the X-axis. I’ve added some gridlines that the top and bottom edges of the A should line up with:

X-axis gridlines

We can already start to see some problems here. Going back to those alignment issues we discovered above, we can see how that top edge not being level is affecting the alignment of the shape with the X-axis gridline.

Arrows showing problem areas

The bottom left of the “A” was only slightly off level but now it’s clear how that minor misalignment also caused an issue with the 3D extrusion.

Let’s move on to the Y-axis:

Y-axis gridlines

Similar to the X-axis, we can see some issues here with the Y-axis:

Arrows showing problem areas

The “A” should be aligned to these gridlines but it’s not as a result of those uneven measurements and angles we discovered earlier. 

Finally, let’s take a gander at the z-axis:

Z-axis gridlines

😲 – shocked
🤯 – mindblown
😭 – crying

This is all wrong. Let me explain:

Arrows showing problem areas

The extrusion of the left leg’s base doesn’t make sense with how it’s skewed in. The right leg of the “A” appears to be bent down from the left leg along the Y-axis causing a huge deviation from the Z-axis gridlines. This is the main reason for the “3D-ness” not looking realistic.

Fixing

I took some time to recreate the Dradis logo using Adobe Illustrator. I corrected all the perspective and symmetry issues with the current logo design by making those uneven measurements and angles equal.

Then I used Illustrator’s 3D tools to make the 3D extrusion and adjust the perspective angle.

3D extrusion and angle adjustment

I was also able to solve the scaling issue by removing the outlines from the logo and adding shaded colors to the extrusion.

From outlines to shaded colors

Additionally, I ensured the ring was aligned to the same perspective angle as the “A” to make it look and feel right as one cohesive logo with 2 distinct elements.

The keen observer may say “but the new logo doesn’t align with the Z-axis described above!”:

Updated logo with old Z-axis gridlines

And they would be right! I like the perspective where we see the flying A’s extrusion on the inner parts of the legs. If we wanted to correct the logo using the original Z-axis angle we would end up with this perspective:

New A on the original Z-axis angle

I ended up changing the Z-axis angle to maintain the previous perspective:

Updated A on the corrected Z-axis angle 

Here is the logo again showing the adjusted Z-axis angle:

New Z-axis gridlines

And to be thorough – here are the X and Y gridlines showing how the updated logo is nice and tidy.

The below shows a comparison of the previous and updated logo designs.

Left: Original logo
Center: Updated logo with corrected perspective 
Right: Updated logo with shaded extrusion

Artboards

Finally, here is the before and after of the favicon.

Left: Before, After: Right

Now, the designer in me can rest easy knowing the logo has a realistic 3D extrusion and perfect symmetry.


Hands on Hacking

The team over at Hacker House has recently released their first book, Hands on Hacking. The book is an incredibly accessible guide for learning pentesting and purple teaming and includes often-overlooked subjects like building a business case for hacking, ethical guidelines, and report writing. 

Report writing, you say?

Needless to say, when authors Matthew Hickey and Jennifer Arcuri reached out to let us know they were featuring Dradis in the chapter on reporting, we were delighted. Since the book’s release, I’ve been able to chat with Matthew to ask about writing this book, his start in hacking and growing a career in the industry, and his favorite reads. 

You can read the full interview with Matthew Hickey at the Dradis Academy.

Hands on Hacking takes a holistic approach to hacking appropriate for those just getting started as well as for management and sysadmins wanting a deeper understanding of the attacks their organization and systems face. 

Want to win a copy of Hands on Hacking?

The team over at Wiley sent us a few copies to giveaway. To enter, share your email address with us below. Winners will be selected at random on October 9, 2020 and contacted at the email address provided to collect shipping information.

The contest is now over, thanks for entering!

New in Dradis Pro v3.9

Dradis Framework is a collaboration and reporting tool for information security teams to manage and deliver the results of security assessments, in less time and with less frustration than manual methods.

MS Word Filters – OR, NOT

Filtering content using OR and NOT hasn’t been possible until now! Now you can add OR and NOT operators to create a dizzying amount of control for your report output. As always, you can string together multiple filters to get the results you want to populate your report.

Imagine That!

We’ve added the ability to upload an image anywhere the editing toolbar appears. Dragging and dropping into the editing area works too, saving you a few steps to add images in your project to show evidence, support your statement, or even add a meme to your comment.

Even More Validation

Meme of cartoon shouting validate all the things

Validating your project before generating it has long been available as a good step to preventing some of the most common report errors. Now, view additional validation in summary views and a panel to help avoid those errors as you are working with report content to catch problems early.

For an at-a-glance way to see what needs a bit more work, the issues and evidence tables include a column showing if that item contains the correct information.

Looks like something needs to be modified…

Issues, evidence, and content blocks now have a validation panel that will highlight problems as you work.

That missing vector could cause problems, glad we caught it now!

Release Notes

  • Add a validation panel for Issues, Evidence, and Content Blocks
  • Add a validation column for Issues and Evidence table
  • Auto upload attachments and screenshots without requiring the use of the staging area
  • Cards, Evidence, Issues, and Notes now have their own attachment support
  • Displays a notification badge in the browser tab when there are unread notifications
  • Editor: Allow drag & drop, copy & paste, and direct image uploading
  • Increase the node properties column size by changing it to LONGTEXT
  • Layout: Breadcrumbs have a fixed position
  • Upload Manager: better validation
  • Bugs fixed:
    • Live filtering of templates (methodologies, notes & projects) via sidebar
    • Use absolute send times in notification emails instead of relative
  • Reporting enhancements:
    • Excel: Fix report generation exceeding the maximum cell limit
    • Word: Add NOT and OR operation for filtering content control
    • Word: Allow non-English localization documents to be exported

Designing & Developing Tylium

On March 2nd, 2020, we released Tylium, a new layout for Dradis projects replacing the long-lived Snowcrash layout. Let’s go into some of the details of the work that went into designing Tylium.

Dashboard view of the new Tylium layout

I’m Matt Budz, the product designer for Dradis, I help create new Dradis features and re-design some of the older ones that need some TLC.

First, let’s start with some background. Snowcrash has been the layout for Dradis projects since 2013. Some users may remember way back when it was released as part of v1.9. It was a shiny new UI built using the now-ancient Bootstrap 2 with a handful of 3rd-party plugin stylesheets sprinkled on top. Many new features were added over the years, but the look and feel of the app became dated.

Dashboard view of the old Snowcrash layout

My goal was to make the app look more modern and to update it to Bootstrap 4. But what does more modern entail?

I wanted to retain the long-used brand colors for both Dradis CE and Pro editions and adjust the remaining color palette to improve color contrast while ensuring the changes wouldn’t be too jarring for existing users.
Increasing on-screen real-estate was a priority during the redesign. Adjusting spacing and incorporating a collapsable sidebar that could move out of the way provided more space. Snowcrash had some inconsistent visual hierarchy, especially around header & paragraph text sizes.

Some elements lacked visual cues to inform users that more information could be seen by scrolling. Additionally, Snowcrash had various cluttered views with a lot of information and action links that could be tucked away and accessed only when needed. I wanted to create an action menu (we call it the dots-menu) that could be used for any resource in virtually any view. I wanted this to have a specific look so that users would be able to recognize that there is something more they can do when they see this menu – like adding, editing, moving, and so on.

I embarked on this re-design journey knowing that I wanted to change the overall layout of the app but not completely re-design the individual partials that are rendered within the layout’s different views. I decided it would be best to work on those as the respective features got updated or other features got added.

Using my design tool of choice, Adobe Xd, I started on the main sidebar and the collapse/expand functionality. I designed this so that the user would expand the sidebar and once they navigated by clicking the links in the sidebar or clicked off the sidebar, it would collapse out of the way. With the sidebar opened, the rest of the view became faded out to bring attention to the floating sidebar. This came with subtle animations for the sidebar width transition, navigation link position, as well as opacity transitions for the node tree and sidebar header. At this point, I also added the new-to-Tylium Dashboard link, so users could easily navigate back to the initial view they are greeted with when they opened the project.

New sidebar style

Next, I moved on to the top navbar. In Snowcrash it was becoming a bit full and offered very limited space for long project names as well as new nav items. It was also visually connected to the sidebar giving the illusion of a smaller workspace for everything else in the project. I wanted to completely separate the navbar from the sidebar so I moved away from using the edition color as the navbar’s background color. In order to save some space, I changed the less-used nav links to round buttons with icons to reduce the total width they took up. I also re-designed the way the search button expanded and behaved to match the new round nav buttons.

Comparison of the old navbar (top) vs the new navbar (bottom)

I worked on the sidebar and navbar while looking at the project dashboard, so naturally, I moved on to the main dashboard area next. I wanted to keep the panels the dashboard had in Snowcrash but with an updated look. Again, I didn’t want to completely re-design any of the partials but I did update things along the way so they would be more cohesive with the new layout. The page heading and the panel headings had to become more distinguishable for one another so I increased the size of the page headers to ensure they wouldn’t be lost with panel headers. I also noticed there was inconsistency with borders and dividers, both in terms of colors and usage. I ensured all borders and dividing lines got the same color and that they were used consistently regardless of the view for a better visual presentation. The panels got a subtle border with rounded corners along with matching underlines for the panel headers. Some other components that got a refresh were the list of issues and the list of recent activities. 

For better user experience, I wanted the sidebar and navbar to always be visible regardless of the height and width of the view. This meant that only the view content would be scrollable. In order to keep a visual consistency throughout the layout, I used the changes I made to the dashboard to set the tone for all the other views.

Sidebar and navbar with locked position

At this point, I had a decent base for all views in the app but one major component that still needed work. Many of the views utilize a secondary sidebar that lists view-specific collections of items like, attachment uploads and import options. In design, we want the secondary sidebar to flow nicely with the main sidebar. I achieved this flow by making the secondary sidebar background color the same as the main sidebar active item background color. This would give the active sidebar item and the secondary sidebar a visual connection. The views that use a secondary-sidebar needed to match the rest of the app by having the view content sections neatly presented in panels. This meant that sections like Comments, Subscriptions, and so on got their own panel.

After all the design was completed it was time to dive into the code and translate the mockups to an actual working layout. Before I could do any of the fun stuff I had to first do the Bootstrap 2 to Bootstrap 4 migration. This proved to be quite tedious and required every single view file to be touched and restructured the Bootstrap 4 way. All the rows, columns, modals, panels/cards, and more, all had to be revised. Additionally, any JavaScript files using Bootstrap 2 classes had to be updated with Bootstrap 4 classes to maintain functionality. Finally, moving on to CSS files, I realized that over time as new features were added to Snowcrash, more CSS was added but as features were revised or updated, the no-longer-needed CSS was not removed. This resulted in a good amount of unused CSS lingering in the codebase. Furthermore, the custom CSS on top of 3rd party stylesheets resulted in some messy CSS that could have been significantly reduced to achieve the same result. I found many instances of over-specified properties on child elements and re-defined properties that were already defined elsewhere for the same elements. I put off cleaning up the CSS until I had the new Tylium layout in place. I figured some of the CSS could be re-used since the design of the partials rendered in the layout would not significantly change.

With the Bootstrap migration completed and out of the way, I was able to start coding the layout changes I’d designed in Adobe Xd. I implemented the design in roughly the same order as I designed it. I started with the sidebar and navbar, then moved to the main content areas of all views without a secondary-sidebar. I added the panel changes to each section of the views and adjusted things like header styles and font-sizes while utilized SASS variables for easy switching of colors between CE and Pro editions. 

Example of Tylium view without a secondary sidebar

Last but not least, I worked on the secondary sidebar and adjusted all the view files that utilized this sidebar and updated panel styles, panel headers, page headers, etc . While coding the secondary-sidebar I quickly realized that it could be taller than the view content itself depending on the collection of items rendered within it. This would cause the view content to be unnecessarily scrollable. To solve this, I locked the secondary sidebar height to match the height of the browser window and made it scroll independently of the main view content. This would also be a more natural behavior in situations where both the secondary sidebar and view content have enough height that they both need to scroll vertically. 

Another challenge I ran into was caused by a bug where the Bootstrap 4 modals appeared under the modal backdrop rendering all modals useless. After many hours of digging through the code, scratching my head, and growing new strands of grey hair, I turned to StackOverflow. It turns out this is a known Bootstrap 4 issue and the best way to solve it is to render all modals as direct children of the <body> tag. This required a refactor of the way we rendered modals in views.

At this point, the layout had come together nicely and everything was working as expected. Any bugs and quirks that came up along the way were resolved. Just as I was feeling good about it, all kinds of specs in the test suite were failing. I dove into the specs and updated what I knew needed updating based on the layout changes and Bootstrap migration but I noticed I wasn’t getting consistent failures. Some specs would fail sometimes and those same specs would pass other times. I had our developers, Aaron and Brian, step in to take a look. After many hours of debugging and researching, they finally realized the problem had to do with the sidebar toggle animation. The test suite was expecting the sidebar to be opened instantly so it could continue to go through the testing steps but the milliseconds of animation caused the test suite to intermittently break causing failures at different points. Ultimately, the solution was to disable animations for the test suite and all was well.

The last piece of the puzzle was to clean up all that old CSS. I ended up restructuring the CSS using a modified version of the SMACSS methodology. While tediously combing through each stylesheet, I removed unused, redundant, and unnecessary CSS. I was able to further reduce the amount of CSS by improving specificity.

Fun fact: Implementing Tylium modified 290 files and reduced the app’s code by 1871 lines.

GitHub stats

Tylium was finally ready for release. Pleasantly, the new look was generally well-received and as more and more users started to use the updated version of Dradis, we started to get more constructive feedback. Both our internal team and our users realized that the auto-collapsing toolbar created a workflow issue in cases where users needed to frequently switch nodes or manually add many new nodes. I set out to fix this hindrance by eliminating the need to click the sidebar in order to create/navigate nodes. After discussing a few options with the team, the decision was made to have users toggle the sidebar manually. To enable users to keep working regardless of the state of the sidebar, I removed the overlay that faded out the rest of the view. This allowed users to chose if they would like to have the sidebar open or closed and we implemented some logic to remember the sidebar state so users wouldn’t have to toggle it each time they returned to a project. This also helped with seamless navigation between views.

Overall, the new layout improved the app by:

  • Increasing screen real-estate by 18-20%
  • Updating Bootstrap’s version from the historic 2.3.2 to a more current 4.3.1
  • Improving accessibility by updating the text colors to meet at least Level AA of WCAG 2.0 standards.
  • Providing users with an app that has a modern look and feel while also increasing their productivity

This entire endeavor started in Oct 2019 with very early rough sketches and spanned about 6 months until it was finally publicly released in March 2020. Huge thanks to the entire team for their help and input throughout the entire process. ✌️

Matt,
Designer.