{"title":"Ond\u0159ej Syn\u00e1\u010dek | software engineer","link":[{"@attributes":{"rel":"self","type":"application\/atom+xml","href":"https:\/\/synacek.org\/atom.xml"}},{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org"}}],"generator":"Zola","updated":"2025-10-05T00:00:00+00:00","id":"https:\/\/synacek.org\/atom.xml","entry":[{"title":"heic-convert","published":"2025-10-05T00:00:00+00:00","updated":"2025-10-05T00:00:00+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/code\/utilities\/heic-convert\/"}},"id":"https:\/\/synacek.org\/code\/utilities\/heic-convert\/","content":{"@attributes":{"type":"html"}}},{"title":"HTML Colors Raycast Extension","published":"2025-04-12T00:00:00+00:00","updated":"2025-04-12T00:00:00+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/code\/projects\/html-colors\/"}},"id":"https:\/\/synacek.org\/code\/projects\/html-colors\/","content":"\n\n\n \n\n\n
\n \n
\n \n \n <\/video>\n \n
\n Browsing the colors\n <\/figcaption>\n \n \n <\/figure>\n \n<\/div>\n

The extension was created from my own need. I often need to create one-off projects with simple purpose but I still like to have some kind of color palette.<\/p>\n

Using basic web colors gives me much clearer sense when reading the source HTML code.<\/p>\n

\n\n\n\n \n\n\n
\n \n \n
\n \n \n \n \n \n
\n Extension store page\n <\/figcaption>\n \n \n <\/figure>\n \n <\/wc-lightbox>\n<\/div>\n\n\n\n\n \n\n\n
\n \n \n
\n \n \n \n \n \n
\n Extension can display color metadata\n <\/figcaption>\n \n \n <\/figure>\n \n <\/wc-lightbox>\n<\/div>\n\n\n\n \n\n\n
\n \n \n
\n \n \n \n \n \n
\n Filter colors by basic or extended set, or group by their shade category\n <\/figcaption>\n \n \n <\/figure>\n \n <\/wc-lightbox>\n<\/div>\n<\/div>\n"},{"title":"There are a lot of ways to break up long tasks in JavaScript.","published":"2025-02-12T05:43:30+00:00","updated":"2025-02-12T05:43:30+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/links\/there-are-a-lot-of-ways-to-break-up-long-tasks-in\/"}},"id":"https:\/\/synacek.org\/links\/there-are-a-lot-of-ways-to-break-up-long-tasks-in\/","content":{"@attributes":{"type":"html"}}},{"title":"How I configure my Git identities","published":"2024-12-30T15:11:58+00:00","updated":"2024-12-30T15:11:58+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/links\/how-i-configure-my-git-identities\/"}},"id":"https:\/\/synacek.org\/links\/how-i-configure-my-git-identities\/","content":"

Configurations for git when you need to maintain multiple identities.<\/p>\n"},{"title":"Kitchen Soap \u2013 On Being A Senior Engineer","published":"2024-08-28T06:24:49+00:00","updated":"2024-08-28T06:24:49+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/links\/kitchen-soap-on-being-a-senior-engineer\/"}},"id":"https:\/\/synacek.org\/links\/kitchen-soap-on-being-a-senior-engineer\/","content":{"@attributes":{"type":"html"}}},{"title":"An approach to optimizing TypeScript type checking performance | EdgeDB Blog","published":"2024-08-13T06:31:13+00:00","updated":"2024-08-13T06:31:13+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/links\/an-approach-to-optimizing-typescript-type-checking\/"}},"id":"https:\/\/synacek.org\/links\/an-approach-to-optimizing-typescript-type-checking\/","content":{"@attributes":{"type":"html"}}},{"title":"Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript \u2013 Frontend Masters Boost","published":"2024-07-30T07:00:07+00:00","updated":"2024-07-30T07:00:07+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/links\/patterns-for-memory-efficient-dom-manipulation-wit\/"}},"id":"https:\/\/synacek.org\/links\/patterns-for-memory-efficient-dom-manipulation-wit\/","content":"

Some great tips for DOM manipulation with regular Javascript. The solution for removing multiple event listeners using is especially useful.<\/p>\n"},{"title":"Why Patching Globals Is Harmful - kettanaito.com","published":"2024-05-11T11:53:33+00:00","updated":"2024-05-11T11:53:33+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/links\/why-patching-globals-is-harmful-kettanaito-com\/"}},"id":"https:\/\/synacek.org\/links\/why-patching-globals-is-harmful-kettanaito-com\/","content":{"@attributes":{"type":"html"}}},{"title":"Understanding Relay Data IDs","published":"2024-04-07T21:56:18+00:00","updated":"2024-04-08T21:21:00+00:00","author":{"name":"\n \n Unknown\n \n "},"link":{"@attributes":{"rel":"alternate","type":"text\/html","href":"https:\/\/synacek.org\/log\/understanding-relay-data-ids\/"}},"id":"https:\/\/synacek.org\/log\/understanding-relay-data-ids\/","content":"

When I started using the Relay framework, I wasn't really sure what I was looking at inside the dev tools.<\/p>\n\n\n\n \n\n\n

\n \n \n
\n \n \n \n \n \n
\n Relay dev tools\n <\/figcaption>\n \n \n <\/figure>\n \n <\/wc-lightbox>\n<\/div>\n

At first glance, it all may seem quite confusing, but after spending a few years working with Relay, it has started to make a lot more sense.<\/p>\n

Firstly, it's important to note that Relay's store1<\/a><\/sup> employs a normalized cache. Picture the store as a key-value data structure, like a Map<\/code>; this is what is contained within the Relay store. As a user of the library, this is mostly abstracted away from you.<\/p>\n

The Data ID<\/code> is used as a key<\/strong> for a given value in the normalized cache. Consider the following type being a part of your schema:<\/p>\n

type <\/span>User {\n<\/span>  id: <\/span>ID<\/span>!\n<\/span>  name: <\/span>String<\/span>!\n<\/span>  email: <\/span>String<\/span>!\n<\/span>}\n<\/span><\/code><\/pre>\n
Whenever you query or receive a payload containing a type with an id<\/code> field, that value will be used as a key for the normalized cache in the store.\nConsider an example type from above. Imagine your schema includes a query like this:<\/p>\n
type <\/span>Query {\n<\/span>  getUser(<\/span>id<\/span>: <\/span>ID<\/span>!<\/span>): <\/span>User\n<\/span>}\n<\/span><\/code><\/pre>\n
Perhaps your Relay code is querying this data somewhere, and you are obtaining some fields using a fragment.<\/p>\n
\/\/ user-panel.tsx\n<\/span>export function <\/span>UserPanel<\/span>() {\n<\/span>    <\/span>const <\/span>data <\/span>= <\/span>useLazyLoadQuery<\/span><userPanelQuery>(\n<\/span>        <\/span>graphql<\/span>`\n<\/span>          query userPanelQuery($id: ID!) {\n<\/span>            getUser(id: $id) {\n<\/span>              ...userPanelHeading_User\n<\/span>            }\n<\/span>          }\n<\/span>        <\/span>`,\n<\/span>        {\n<\/span>          id: "<\/span>MTpVc2VyOjEyMw==<\/span>",\n<\/span>        }\n<\/span>    );\n<\/span>\n<\/span>    <\/span>return <\/span><<\/span>UserPanelHeading <\/span>dataRef<\/span>=<\/span>{<\/span>data<\/span>.<\/span>getUser<\/span>} <\/span>\/>;\n<\/span>}\n<\/span>\n<\/span>\/\/ user-panel-heading.tsx\n<\/span>export function <\/span>UserPanelHeading<\/span>({ <\/span>dataRef <\/span>}: { <\/span>dataRef<\/span>: userPanelHeading_User$key }) {\n<\/span>  <\/span>const <\/span>{ <\/span>id<\/span>, <\/span>name <\/span>} = <\/span>useFragment<\/span>(<\/span>graphql<\/span>`\n<\/span>    fragment userPanelHeading_User on User {\n<\/span>      __typename\n<\/span>      id\n<\/span>      name\n<\/span>    }\n<\/span>  <\/span>`, <\/span>dataRef<\/span>)\n<\/span>\n<\/span>  <\/span>return <\/span><<\/span>p <\/span>key<\/span>=<\/span>{<\/span>id<\/span>}<\/span>><<\/span>strong<\/span>>Name: <\/<\/span>strong<\/span>><\/span>{<\/span>name<\/span>}<\/span><\/<\/span>p<\/span>>\n<\/span>}\n<\/span><\/code><\/pre>\n
And the response might look something like this:<\/p>\n
{\n<\/span>  "<\/span>data<\/span>": {\n<\/span>    "<\/span>getUser<\/span>": {\n<\/span>      "<\/span>__typename<\/span>": "<\/span>User<\/span>",\n<\/span>      "<\/span>id<\/span>": "<\/span>MTpVc2VyOjEyMw==<\/span>",\n<\/span>      "<\/span>name<\/span>": "<\/span>Johnny Appleseed<\/span>"\n<\/span>    }\n<\/span>  }\n<\/span>}\n<\/span><\/code><\/pre>\n