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. In React it also helps to ensure that dependencies and data is passed correctly between the different components.

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. This means that a table should be used when the data is best presented as such, and the alternatives are inferior. Which in turn means that responsiveness should be about presenting tables more or less as they are. That is, without distorting or rearranging them or the surrounding layout in a way that makes either lose meaning.

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. The common thing is that it makes you feel like you’re either very far from your goal, or that the thing standing between you and the finish line is insanely boring.

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. And are those kinds of expertise really that clearly separated? Or are we seeing more and more people starting to cover both fields?

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. When building a logistic system for business customers, this covers everything from database to UI design and all layers between. Developers write CSS in the morning, and debug production issues in PostgreSQL after lunch. They handle a whole range of wildly varying technologies. Not every individual member needs to wield them all to the same extent (that’s what teams are for, working together!) But as a unit; the vertical team is full stack.

“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.

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. There are things you can do to figure out what that is, and DIY till your department hires more frontenders.