Nanda Syahrasyad
occasional writer @ nan.fyi
- dns tables
- nested steps
- no svgs here, which means the animation and layout code gets much simpler!
- in workflow land for a bit
- New website, new domain, new discount! Did a complete overhaul for Interactive SVG Animations' landing page, complete with a brand new (and much shorter!) domain. To celebrate (also as it's BFCM :) ), the entire course will be 20% off until next Friday! svg.guide
- more progress on svg-animations.how's new site — now with built-in regional pricing!
- sketching
- active deployment card
- before
- some design fixes on the workers metrics tab - scrollable overflow to the right and styled selects (after/before)
- that active deployment card is still :pain: though, fixing that next
- New post 🎉 Going back to my roots on writing about the inner workings of things, a breakdown of key-value databases and how you might make one from scratch: nan.fyi/database
- fun with presence
- running
- inspired by x.com/kitlangton/... ❤️
- experimenting with grey
- before
- finally hit an aesthetic for my japanese learning app that im happy with (i swear i'll actually start learning and not redesign the same app 100x)
- credit where credit is due, very very inspired (honestly borderline copying 😭) from www.bf.inc/
- Reposted by Nanda SyahrasyadAs usual, Danny hits the nail on the head. 🔨 I’ve had to fight this temptation myself. Cursor changes 50 lines and the lazy part of my brain says "I’m sure it’s fine, just accept the changes". Seems like a great way to plateau in your growth as a developer. 😬
- back to doing work on nan.fyi, starting with reviving a databases post from ~2.5 years back:
- a major goal this year is to go back to nan.fyi — drafted this redesign but not sure if too much motion 🤔
- i think the most exciting thing about finishing the course is finally getting to the million projects i pushed aside in the last year and a half
- Interactive SVG Animations is now live! Everything I know about SVGs, distilled into five modules covering everything from syntax, advanced SVG features, peformance characteristics and more! You can preview the first lesson right here (desktop-only atm!) svg-animations.how/preview
- The course is built on a bespoke learning platform that has visuals and interactivity at its core. Each lesson comes with various visuals that change with the text and animations that respond to your input:
- Each lesson also comes with interactive sandboxes that let you apply the topic we just covered in code. In one exercise, we animate a chart from fey.com (h/t to @tcosta_co and @brotzky_ here):
- You can get the course for $119 today and get full access to all the modules right away! The price will jump to $199 USD come the new year. svg-animations.how
- not entirely set in stone with the growing bars yet but i am pretty happy with this:
- making the `feColorMatrix` section for svg-animations.how was pretty tricky because I had to figure out how to explain it without diving too deeply into matrix algebra 😅 pretty happy with this one though:
- Reposted by Nanda SyahrasyadAfter 15+ years of teaching, architecting & delivering CSS for global organisations & startups, I’ve collated that experience into an extensive course which will take your CSS skills beyond the next level. Complete CSS has taken nearly a year to produce and it’s officially live 🎉 complete-css.com
- New Interactive SVG Animations update! In the first out of the three "SVG Details" sections, we talk about gradients, masks, and all the ways you can use them to animate some pretty cool effects! Check it out: svg-animations.how
- Using Outside™ as a reference
- I started off writing this gradients piece thinking I'd have too little to write about, but now I'm fairly sure it's the longest part of the course 🤔 Anyways, little preview!
- made a few more transitions for the next part on gradients!
- sign up for the mailing list to get notified when it's out :) svg-animations.how
- made an unnecessary transition yesterday
- Reposted by Nanda Syahrasyadjust put everything in one place. never serve more than one person at a time. if they gotta wait they gotta wait. can we do that
- The next part of Interactive SVG Animations is now live! In this section, we finish up the paths module with morph animations—how do you get a shape to shapeshift to another? svg-animations.how
- This update includes one of my favourite interactive components that I've made to date: this path diffing tool!
- way too used to pleasing The Algorithm 😅 the link if anyone is interested! svg-animations.how
