My learning diary

Reach Router Match

I use Reach Router. I’ve a component which isn’t a child of Router, so it does not have the useLocation hook. But I need to access the current URL in that component. Here’s how I did it after seeing Jacek’s hint: <div> <Match path="/*"> {(props) => ( <MyComponent path="/*" match={props.match ?? ''} /> )} </Match> <Router> ... </Router> </div> interface Props { match: any; } export const MyComponent: FC<Props> = (props: Props) => { const pathname = props.

Continue reading "Reach Router Match"

Numerical IDs in MongoDB

Auto-generated IDs in MongoDB are “strange” strings. I quote “strange” because they are actually derived not out of nowhere despite looking like they had nothing to do with anything. But to users, these IDs are strange. I had a collection of documents with a name property. Originally, name was annotated with @Id. But it meant that I couldn’t change the value of name. name was also annotated with regex validation (@Pattern(.

Continue reading "Numerical IDs in MongoDB"

Abstract classes and AOP

I wanted to avoid writing boilerplate code for CRUD in Spring Boot. But I failed - I couldn’t make my child aspect get along with my child controller. Before adopting AOP, I had an abstract controller which the child controller inherited. CRUD worked well and I no longer needed to repeat the code for simple CRUD anymore. I was happy. // MyAbstractController public abstract class MyAbstractController<T extends UniversalModel> { private final .

Continue reading "Abstract classes and AOP"

Super Thinking Chapter 01

Being Wrong Less Inverse thinking. Instead of thinking how you can save money, think about how you can reduce your expenses. Unforced error. A personal shortcoming which can be controlled. Anti-fragile. Treating setbacks as challenges and thriving on them. Keep it simple, stupid! Arguing from first principles. De-risking. Challenging assumptions and verifying or debunking them. Premature optimisation. Minimum viable product. Ockham’s razor. “The simplest explanation is usually the right one.” Conjunction fallacy.

Continue reading "Super Thinking Chapter 01"

Sticky

I found myself entangled in CSS. I needed app-header to stick to the top at all times. I also needed template-header to be right beneath app-header at all times. Lastly, embedded-content should begin immediately after template-header and shouldn’t be sticky. Here’s how the page organisation might look like: <div class="app"> <div class="app-header"> <!-- Content --> </div> <div class="app-content"> <div class="template-container"> <div class="template-header"> <!-- Content --> </div> <div class="embedded-content"> <!-- Content --> </div> </div> </div> </div> The simplest approach is to place app-header and template-header inside a single div.

Continue reading "Sticky"