Jiayee.net

My learning diary

Core React Training Day 1

#braindump #react
I’m thankful to be able to attend a React training workshop organised by my company. I’ve been using React in my job but this workshop made me realise I still have lots to learn. The exercises were very manageable. I learnt the most from the instructor’s detailed explanation of how React works: Babel is not part of React but it was helpful to know how Babel makes our lives easier by parsing JSX.

Continue reading "Core React Training Day 1"

File Upload to Spring Boot

#spring
Implementing file uploads through GraphQL was something I never managed to succeed in. Got embroiled in type incompatibilities. And eventually, I gave up and implemented a separate but simple API endpoint just for file uploads. So here’s the design: The user clicks “Submit”. The files get uploaded first. Upon upload, the server returns IDs. And the rest of the form data plus the returned IDs are sent to the GraphQL endpoint.

Continue reading "File Upload to Spring Boot"

Spring Boot Interceptors

#spring
A neat trick to log HTTP requests and responses in a Spring Boot project is through interceptors. To log requests and responses between the client and the server, I use the HandlerInterceptor (Introduction to Spring MVC HandlerInterceptor). To create this interceptor, simply extend the HandlerInterceptor interface. By overriding the various methods available, you can intercept the request and/or response at different points of time. For example, preHandle is executed before the request is executed (i.

Continue reading "Spring Boot Interceptors"

Truncating Strings With CSS

#css
A few days ago, I wouldn’t have realised truncating strings by number of lines with CSS was possible. I was beginning to sweat when I received a request to truncate strings by number of lines instead of number of characters. To be fair, only SWEs would think of truncating by number of characters instead of line numbers… My teammate shared an answer he found at CSS-Tricks. If I recall, it didn’t work out for me because of the way the containers were styled.

Continue reading "Truncating Strings With CSS"

Reach Router Match

#react #reach
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"

Previous page
Next page