A rather geeky/technical weblog, est. 2001, by Bramus
Adam Argyle looking at several techniques to center in CSS, and how they hold up in several conditions (narrow screen, rtl, etc) In today’s challenge, we’re stress testing 5 different CSS centering techniques. See what techniques should earn a place in your tool belt by watching how they react to common layout stress. The contestants: …
Continue reading “Thinking on ways to solve Centering in CSS”
Andrey Sitnik: It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Having only this in your markup …
Now this is a fun pen! How many HTML tags can you remember? Stranded on 58 here, which is just over 50%. Perhaps if I think about it a bit more I can add a few extra to the list, but don’t think I’d get that much further though … Now don’t you go peeking …
When working on creating a complete keyboard navigation experience for Discord, using styling with :focus and outline, the folks at Discord ran into issues where the outline would not match the shape of actual element being rendered. Thinks like border-radius, overflow: hidden; on the container, padding got in the way. So they set out to …
Continue reading “How Discord Implemented App-Wide Keyboard Navigation”
Using Apollo Client’s InMemoryCache and Local Resolvers, it’s possible to have it query your Redux store: import store from "./Store"; const typeDefs = gql` type Query { users: [User] } type User { groups: [Group] } type Group {} `; const client = new ApolloClient({ cache: new InMemoryCache(), typeDefs, resolvers: { Query: { users: () …
From the folks at Basecamp comes Turbo: Turbo accelerates links and form submissions without requiring you to change your server-side generated HTML. It lets you carve up a page into independent frames, which can be lazy-loaded and operate as independent components. And finally, helps you make partial page updates using just HTML and a set …
Just announced by the React Team are Server Components: React Server Components are still in research and development. We are sharing this work in the spirit of transparency and to get initial feedback from the React community. With Server Side Rendering the rendering of your app to HTML happens up front, gets sent to the …
Continue reading “Data Fetching with React Server Components”
As the syntax for CSS Custom Properties is overly permissive it’s possible to store a JavaScript attack vector in them …
content-visiblity: auto; vs. jumpy scrollbars, a solution
As warned in content-visibility: the new CSS property that boosts your rendering performance you need to be careful with applying content-visibility: auto; on each and every element as the scrollbar might get jumpy. This is because elements will be rendered as they scroll into the viewport and will be hidden as they scroll out of …
Continue reading “content-visiblity: auto; vs. jumpy scrollbars, a solution”
Pretty crazy: a timelapse + lip-sync video all while growing a beard in between: Timelapse animation music video, with my beard growing through Covid lockdown. Using my face as a stop-motion puppet (a technique called pixilation), I took 2,117 individual photos, every night, over 101 days, and synchronized the actions to the song “Better Days” …