🎨 Creative developer and CSS nerd at mojopsg.com 🤓 Enjoys '80s aesthetics, video games, movies, languages, and synths. 📍 From France, based in the US. (weird not-French accent) 💬 Pronouns: he/him
Public Key
npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t
Profile Code
nprofile1qqs8zsygwapj54vxywp2ghf4n7n788s635lw73czcxuxlts826sx5zqpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0ds2flw82
Author Public Key
npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Show more details
Published at
2024-02-29T18:41:50+01:00 Event JSON
{
"id": "6e6779bd3107d765d04b45ba689668d553a60b0a5e26252b78313a5e55a02cd2" ,
"pubkey": "71408877432a55862382a45d359fa7e39e1a8d3eef4702c1b86fae0756a06a08" ,
"created_at": 1709228510 ,
"kind": 0 ,
"tags": [
[
"proxy",
"https://front-end.social/users/chriskirknielsen",
"activitypub"
]
],
"content": "{\"name\":\"Christopher Kirk-Nielsen\",\"about\":\"🎨 Creative developer and CSS nerd at mojopsg.com\\n🤓 Enjoys '80s aesthetics, video games, movies, languages, and synths.\\n📍 From France, based in the US. (weird not-French accent)\\n💬 Pronouns: he/him\",\"picture\":\"https://cdn.masto.host/frontendsocial/accounts/avatars/112/011/364/179/412/635/original/3a06df6fb599e845.jpg\",\"banner\":\"https://cdn.masto.host/frontendsocial/accounts/headers/112/011/364/179/412/635/original/e60b7e4e0c5f08b4.jpg\",\"nip05\":\"[email protected] \"}" ,
"sig": "8045dd5378cdfc13a6c30b517d96e9ae75655a9ceb7d23c4f9c2ea9910b0ce4ba1ded89aab03947059ad620052daf11fd04799c8926f04c88e3ac2b2634ada4c"
}
Last Notes npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1y9z…3ykm Try `{% postGraph collections.post, { "only": "["+postYear+"]" } %}` npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen Not to brag but I wrote a #CSS subgrid layout that worked on the first try. Time to log off, can't achieve anything better than that. npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen Looks like I might be needing to use #Sanity for a client project (their pre-approved CMS). Any excellent intro guides out there? Or perhaps Sanity's own guide is enough? (also you bet I'm thinking about using it with @npub1z9m…rz2z 👀) npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub13q3…hr6l Wowza, theming is about to get a lot more fun for me. 😄 npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen The amount of money you get gouged out of just because you have pets when renting a new place is criminal. 🫠 Remembering this post by @npub1z9s…pzd6 for no reason whatsoever: https://robinrendle.com/notes/against-landlords/ npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen Joining in to say I _also_ have that #CSSDay #FOMO, but it's great to be able to follow along with all this live tooting going on — thanks, CSS nerds! npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen Man, I just really love #SVG and #CSS. Built a little distortion effect in SVGFM (https://svgfm.chriskirknielsen.com/ always be plugging), then added an animation tag in the turbulence primitive to get some movement, converted that to a data URI SVG with the filter ID at the end, and voilà, shown on hover! PS: Of course it doesn't work at all in Safari, and looks pretty poor in Chrome compared to Firefox. 🫠 https://cdn.masto.host/frontendsocial/media_attachments/files/112/556/026/032/031/316/original/e4bc6a23ebd07fa0.mp4 npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen No one: Absolutely no one: Me: OKAY FINE! You can dynamically edit my CSS logo idea, now! Happy‽ (also downloads are for the non-edited version) https://chriskirknielsen.com/css-logo/ npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1xed…yg9w https://cdn.masto.host/frontendsocial/media_attachments/files/112/446/530/285/480/449/original/fa5915231266cfa6.png npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1p3x…uq4c Great talk, great topic, great GIF pronunciation, great domain for the demo. 11/10 #11tyconf npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen I'm probably going to get a new laptop soonish, and when that happens, this little fella is going straight onto it! Such a cute character! (not pictured: a neat shirt!) #eleventy https://cdn.masto.host/frontendsocial/media_attachments/files/112/367/704/074/635/792/original/08ce2a43e5bb9617.jpg npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1y9z…3ykm It exists, but isn't officially advertised by Sony, however smart people have figured it out and made it super easy to use. I used this one: https://psn-api.achievements.app npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen Inspired by @npub1y9z…3ykm, I made a game collection page — less visually appealing, but I had fun with the #CSS: https://chriskirknielsen.com/games/library/ npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1z9m…rz2z Is it the holy grail to paginate paginated pages (say that 5 times fast!), like `/tags/css/page/2`, where `css` is a tag in the tags list, and 2 is a pagination as well? npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1z9m…rz2z Ooh, shiny! I love that the possum sticker is "kiss-cut". 😚🤌 $40 well spent! npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1c35…9pmh Pretty much! I'm not saying this is the best approach, but it's the best I could think of, at the moment. You could probably flip it on its head and render every N milliseconds instead, might give you a more accurate result in terms of progress. npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1c35…9pmh Main issue is that you're waiting for each cell to paint before passing in the next one, so instead you could batch them with a RAF (runPaintJobs function) and a variable controlling how many cells to draw at once: https://codepen.io/chriskirknielsen/pen/VwNPKXL?editors=0110 npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1y9z…3ykm Any time! Also they had THPS *4* on PS1?! Daaang, THPS3 was already a stretch in my eyes. 🫠 npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1y9z…3ykm Came across your gaming collection page (https://rknight.me/collections/games/) and I love all that organisation. I have a similar setup in Notion, maybe I should do something similar… 👀 Anyways, just wanted to report that the PS1 logo, for the middle strip in the S, the green-ish fill is missing the `#`, causing it to render in black. https://cdn.masto.host/frontendsocial/media_attachments/files/112/112/386/554/363/378/original/7100f9bd082fd2bd.png npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub13q3…hr6l "Contributions" seems like the right word here, though it might be almost too vague? "Proposals & Contributions" could work but a proposal _is_ a contribution, one way or another, so… it's redundant and we're back to just "Contributions". Prepend "Web" or "Tech" to maybe narrow it down? npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1y9z…3ykm Oh nice, I like this, but especially that section about fonts, fonTS, FONTS! *hits fists on desk* npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1z9m…rz2z Looks good now! 🙌 npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1z9m…rz2z I like the updated look! One bug to report: the documentation button is buggy when hovered in Firefox, or has fallen victim to quantum entanglement. Maybe some overflow (due to scaling) is the issue? https://cdn.masto.host/frontendsocial/media_attachments/files/112/061/754/048/610/398/original/9990277dd6b1df8e.png https://cdn.masto.host/frontendsocial/media_attachments/files/112/061/757/754/781/478/original/70ab3cd118e42404.mp4 npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1xed…yg9w Half an hour ago, I was looking at an old project which still uses Font Face Observer and thought "there's probably a better way by now" and now you post this. Thanks! npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub16mu…qy4m I've been bitten by this too, combined with a CSS formatter that wants to remove the space if I remember right. The space works but it feels like secret magic so I guess the best call would be to provide the border-image-width between those slashes? Not even sure that's what goes in there. 😅 npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen @npub1y9z…3ykm @npub19kd…4jdw @npub1xed…yg9w Didn't Zach automatically iterate over hundreds of fonts to come up with the 11ty logo? I'm almost sure there was a write-up… or I've hallucinated it. Beep boop. npub1w9qgsa6r9f2cvguz53wnt8a8uw0p4rf7aars9sdcd7hqw44qdgyqlgn50t Christopher Kirk-Nielsen Server switch = #introduction time! 👋 I'm Chris, a front-end developer (and CSS nerd) who used to be a graphic designer. I'm Danish, grew up in France, and live in the US, so I love languages (+ I know some Italian, and picked up Japanese again via Duolingo). I'm infatuated with 80s aesthetics (neon! VHS!), and like being creative. I make (made 👀) music (synths are cool!), and enjoy puns, video games, movies, and reading books sluggishly. Oh and here's my web site: https://chriskirknielsen.com