Code-and-Design

What’s the design system documentation without a dedicated page for colours? In our case, it’s clearer and with fewer palette detours.

There are loads of tools aiming to help developers secure that their code works as expected. Cypress is one of these tools but stands out by being an end-to-end framework. This means that Cypress allows you to test that your application is performing the way you designed it, from start to finish. End-to-end testing is especially useful to test the features and the end user’s workflow.

When I set out to solve responsive tables, I figured it would take a whole team a couple of weeks and we would build a microscopic component to provide clever shuffling of <div> elements. Instead, my conclusion led me to the opposite. Responsive tables are less about making them responsive and more about presenting them in responsive environments. The principle Use the <table> element for things that it would make sense to copy and paste into a spreadsheet.

Regardless of how enthusiastic you are laying the first bricks of a project, at some point you’ll realise that the stack of bricks, look suspiciously like a wall, or something different than originally pictured. The wall can be many things. It can be slow code reviews or a growing list of tasks and features that prevent deployment. It can also be a bug that seem to only appear when the stars are aligned and you press a button too quickly after filling in a form.

Also published in Norwegian @ kode24.no: Kode som overlegent designverktøy Have you ever thought about the fact that the users are never really in direct contact with what designers make? User interfaces are built by developers who are experts on the users’ environment, but the decisions are made elsewhere, by people that use entirely different tools. Sounds suboptimal, doesn’t it, keeping technical knowledge and user knowledge apart like this.

Our frontend team hit the ground running one year ago. What have we learnt about supporting the vertical teams? What do we mean when we say it’s horizontal? Technology Specialists 🏊‍♀️ The deepest depths of the technology stack are best left to divers — while we are the fast swimmers at the surface. Vertical teams are responsible for every single moving part of applications they own.

“This is bug, please say hello.” There are many ways to introduce bugs. Adding CSS as dependencies is one of them. True story Let’s say you add a small and simple css reset dependency to your project. A somewhat opinionated and best practice-based stylesheet that has thousands of weekly downloads. It serves as your baseline for every new project and it’s easy to keep up to date.

You might have heard all about frontend devs and UX-designers, but have you heard about those that are practically both? The ones who are into both interactions and code? No, not mutants, but hybrids! Like the ones on the frontend team who think that designing and developing an interface are two sides of the same coin. Operating in what has been considered two separated fields means there is a lot to learn, maybe not more than anyone else, but across disciplines.

Do you ever find yourself having to build user interfaces for web applications without an interaction designer or UI developer in sight? What on earth is a fullstack-ish backender supposed to do?! The UXers are off gathering insights, graphic designers are in a different corporate silo all together, the nearest frontender is busy. Fear not! While design work sounds like a scary slippery slope away from coding, there is great pleasure in actually coding the right stuff.