Techreport blog

Engineering Insights & Guides

The best problem-solving writing in software engineering — databases, performance, security, frontend and distributed systems, in one feed.

11,777 articles
Frontend — Overlapping Header with CSS Grid

Overlapping Header with CSS Grid

Snook shows off a classic design with an oversized header up top, and a content area that is "pulled up" into that header area. My mind goes to the same place:

CCChris Coyier·June 1, 2020Frontend
Frontend — React Error Handling And Reporting With Error Boundary And Sentry — Smashing Magazine

React Error Handling And Reporting With Error Boundary And Sentry — Smashing Magazine

In this article, Chidi Orji will explore the concept of error boundaries in a React application. You’ll work through an example app to see how we can use error boundaries to deliver a better app experience. Finally, you’ll integrate Sentry into our error boundary for realtime error reporting. The only prerequisite is that you have some familiarity with React class components. Let’s dig in!

COChidi OrjiChidi Orji·June 1, 2020Frontend
Engineering — Tech Migrations, the Spotify Way

Tech Migrations, the Spotify Way

In our experience, big technology upgrade efforts or migrations (as we fondly call them at Spotify) gear up with a lot of momentum in the beginning but tend to get stuck in the mud over time, eventually leading to a long tail of systems still left running on older versions. This is one of the ways fragmentation creeps into your tech infrastructure, like weeds sprouting in a garden — left unattende

S“Saunak “Jai” Chakrabarti and Jenni Lee·June 1, 2020Engineering
Frontend — Increment Issue 13: Frontend

Increment Issue 13: Frontend

Increment is a beautiful quarterly magazine (print and web) published by Stripe "about how teams build and operate software systems at scale". While there is

CCChris Coyier·May 30, 2020Frontend
Engineering — ShipIt! Presents: How Shopify Uses Nix - Shopify

ShipIt! Presents: How Shopify Uses Nix - Shopify

On May 25, 2020, ShipIt!, our monthly event series, presented How Shopify Uses Nix. Building upon on my What is Nix post, I show how we rebuilt our developer tooling using Nix, and show off some of the tooling we actually use at Shopify on a day-to-day basis. I wasn't able to answer all the questions during the event, so I've included answers to those ones below. Would runix interop well with lorr

SEShopify Engineering·May 29, 2020Engineering
Databases — Mirage JS Deep Dive: Understanding Factories, Fixtures And Serializers (Part 2) — Smashing Magazine

Mirage JS Deep Dive: Understanding Factories, Fixtures And Serializers (Part 2) — Smashing Magazine

Factories are a faster way to create new database records., A fixture is a state of a set or collection of objects that serve as a baseline for running tests, and a serializer is responsible for transforming the response. In this second part of the Mirage JS Deep Dive series, Kelvin Omereshone will be looking at Mirage JS’ Factories, Fixtures, and Serializers. You’ll see how they enable rapid API

KOKelvin OmereshoneKelvin Omereshone·May 29, 2020Databases
Performance — How To Run The Right Kind Of Research Study With The Double-Diamond Model — Smashing Magazine

How To Run The Right Kind Of Research Study With The Double-Diamond Model — Smashing Magazine

User research helps companies make higher quality software faster and more cost-effectively. However, there can sometimes be resistance to the up-front costs of running UX studies. In this article, Steve Bromley will equip you with some of the tools you will need to run the right kind of research study. This helps a research team run high quality, reliable studies that have a real impact on design

SBSteve BromleySteve Bromley·May 29, 2020Performance
Engineering — Patterns for Managing Source Code Branches

Patterns for Managing Source Code Branches

Modern source-control systems provide powerful tools that make it easy to create branches in source code. But eventually these branches have to be merged back together, and many teams spend an inordinate amount of time coping with their tangled thicket of branches. There are several patterns that can allow teams to use branching effectively, concentrating around integrating the work of multiple de

MFMartin Fowler·May 28, 2020Engineering
Engineering — GitHub Action Hero: Adam Dobrawy

GitHub Action Hero: Adam Dobrawy

GitHub Actions allows you to automate your workflow. Connect with the tools you know and love, and have more freedom to innovate and be creative. With GitHub Actions, you can…

MDMichelle DukeMichelle Duke·May 28, 2020Engineering
Engineering — Introducing Hack Club’s Summer of Making

Introducing Hack Club’s Summer of Making

We’re partnering with Hack Club to support the students behind Summer of Making, a new remote, student summer program. From building Arduino-powered robots to creating an open source game, we’re excited to see students channel their passions and build with the Hack Club community this summer.

EHElise HollowedElise Hollowed·May 28, 2020Engineering
Frontend — How To Create Better Angular Templates With Pug — Smashing Magazine

How To Create Better Angular Templates With Pug — Smashing Magazine

Pug is a template engine that allows you to write cleaner templates with less repetition. In Angular, you can use Pug to write component templates and improve a project’s development workflow. In this article, Zara Cooper In will cover how you — as an Angular developer — can use Pug to write better templates more efficiently. You’ll learn how to install Pug in your Angular apps and transition exis

ZCZara CooperZara Cooper·May 28, 2020Frontend