Skip to main content

Sane React config with Webpack

Going from an empty folder to a living React project can feel like a daunting task. As we pointed out in our precursor, if you have been overwhelmed by certain ejected configs or underwhelmed by zero-config tools, it’s time to learn how to set up pragmatic, powerful and customisable configs. For this, we will be using, but not explaining, Node, npm and the terminal.

Read Sane React config with Webpack →

Your frontend, your config

The way frontend is done today, knowing how to configure bundling tools has become as relevant as knowing CSS, HTML and JS. For most of us, the code we write, with or without a framework, involves some level of processing. This is the precursor to our Webpack tutorial. It’s meant to prove a point that the tools used for learning things like React, mostly fail to give an impression of a realistic configuration.

Read Your frontend, your config →

Design system docs without colour

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

Read Design system docs without colour →

Testing with Cypress

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.

Read Testing with Cypress →

Principle for responsive tables

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.

Read Principle for responsive tables →

How to avoid the wall of frustation

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.

Read How to avoid the wall of frustation →

Experience with Frontend Error Tracking Using Sentry.io In React Apps

It has been more than a year we started using Sentry.io to identify the user experience and UI failures one year ago. I thought of sharing What have we learnt about it so far and our experience with it. 📄 Intro 🏊‍♀️ Why do you need Sentry? Sign In and create a project Integrate Sentry in app First error tracking Use Sentry with API Endpoint When and what to log in Sentry Why do you need Sentry?

Read Experience with Frontend Error Tracking Using Sentry.io In React Apps →

Code – the superior design tool

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.

Read Code – the superior design tool →

Team building - Hiking to Veslesmeden

 

Some years back a few people in the web department headed off for Galdhøpiggen 🎒🥾, not very well equipped. Weather was bad, and they didn’t manage to reach the summit. But that hike was the beginning of a tradition with yearly trips to different summits. 🏔 This year 18 people headed off with the train 🚝 to Otta, for a nice weekend at Rondvassbu and where the goal was Veslesmeden.

Read Team building - Hiking to Veslesmeden →

Horizontal Teams To Strengthen Vertical Structures

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.

Read Horizontal Teams To Strengthen Vertical Structures →

Zombie CSS, dependency cravings

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

Read Zombie CSS, dependency cravings →

Mutant developers? No, frontend hybrids!

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.

Read Mutant developers? No, frontend hybrids! →