Milestones
🍞 & 🧈: Magically load data with SvelteKit Endpoints
11 months agoNew video! This took "Auth with SvelteKit" amounts of work and I'm super proud of the result. I think it's EVEN MORE important too, because cracking auth can really upgrade your skillset, but what we cover here really is the Bread & Butter of App Development 🚀
🕵️♀️ Find & Recommend AWESOME VSCode Extensions 📢
1 year agoNew video! A relatively quick one, probably featuring more "life-lessons from Johnny" than lines of code. Hope you enjoy, as you clearly have been since we broke 1,000 subscribers right after I finished recording for this video! No matter how many subscribers we grow to have, today this is a huge milestone for me and the channel, and I'm definitely celebrating 🥳
🧪 Test SvelteKit with TDD & VITEST 🧪
1 year agoNew video! The algorithm doesn't really like whenever I cover testing, but it's probably what I talk about the most with colleagues... For me it's the most important thing to ship fewer bugs to production AND to be more hire-able 😉 So I'll keep trying, hoping in the long run people will be searching for TDD, Vitest, Testing Library, tsconfig problems... 😄
STICKY glass HEADER 😎 with Svelte and Tailwind
1 year agoNew video! First one in ages I've shot in a place I'm renting, instead of AirBnBing 😂 Also first one I've ever edited in Final Cut Pro AND first one using my new Mac Studio 🥰
SSR SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄
1 year agoNew video! My longest video yet, and by far my biggest effort; is it the best in quality? You tell me 😄 To tout my own horn though, I firmly believe people sell content like this as a Master Class 🤑
SvelteKit SSR Dark Mode 🌒 with cookies! copy
1 year agoNew video! This is the most scripts I've drafted till I finally settled on what to shoot 😬 I don't think this subject is catchy enough for most people, but the story and what we learn is extremely valuable... Hopefully I made it entertaining enough, but I defo had fun and this content will unblock others in the near future 😉
How to: Deploy SvelteKit to Vercel 🚀
1 year agoNew video! I had a suggestion to cover SvelteKit deployments in my last video, and I thought it'd be a nice and easy one to do, given it'd be very similar to what I showed in my "An App with Next.js" series! 🚀 Starting off the new year actioning user feedback 😄
Tailwind 3 with SvelteKit
1 year agoNew video! It's been a year since my most viewed video, so I figured a celebratory recreation using the latest Tailwind and SvelteKit versions would be fun! See them both and tell me how my style has changed 😄
🧲 Magnetic Carousel with Tailwind 3 & Svelte 🎠
1 year agoNew video! Tailwind 3 came out with JIT by default and amazing performance during development, but I was most excited about the "scroll snap" demo when it comes to new features.
So I made a video all about it! 😄
🦹♀️ Fearless demos, controlled tests 🧪: Next.js with MSW
1 year agoNew video! This is by far the most involved intro I've put together! I'm doing my best to keep at least the opening of the video entertaining even if you are not an Engineer, before moving on to the how-to / tutorial.
I strive to make those fun too of course, but I realise I can't do as much when most of the screen must be readable code 😄
🧪 Next.js with Jest & RTL 🤡
1 year agoNew video! I did want to explain how to setup Jest with Next.js for a while... the recent addition of next/jest as an experimental feature gave me the perfect opportunity! 🧪
Animate a 🍔 menu with SVG & CSS in Svelte
1 year agoNew video! I was inspired by a viewer to do a Hamburger Menu animation, and by Rich's news that he's going to be full-time at Vercel, to implement in Svelte!
Svelte & SvelteKit have come a long way already, can't wait to see what happens with Vercel backing!
DRY Next.js with Custom App & Custom Document ♻️
1 year agoNew video! It's very rare you'd be doing Next.js just to serve a single splash page, so let's bring in a Contact page and share as much code as possible, by leveraging Next.js' Custom App & Custom Document!
Font Optimization with Next.js, Google Fonts and Tailwind ✒️
1 year agoNew video! Next.js had another amazing conference, so I was inspired to get on with videos again with this quickie!
Code your own Typing Animation with React ⌨️
1 year agoNew video! Everyone's doing typing animations, but who's doing it with Tailwind.css? Well, me, and everyone who watches this video 😄
Why can’t I get my LOGO in my APP? 😨
1 year agoNew video! I really had fun with the intro for this one! Not that it's a blockbuster production, but I'm opening with a bit of a joke boosted by music & sound effects, I think it came out well!
TailwindUI with Next.js
1 year agoNew video! Rapidly build professional apps with TailwindUI and Next.js. TailwindUI gives you such strong foundations, and TailwindCSS makes it so each to tweak to taste 😋
Tailwind with Next.js
1 year agoNew video! My longest one yet, the setup itself is about 4 minutes, but I've elaborated on a couple essential tips 💅
An app with Next.js 👩💻🧑💻👨💻
1 year agoAnalysing my best performing posts & videos, looks like people love seeing me do Next.js and Tailwind! So we'll be doing cool stuff with both in this new series 🚀
⚡️ Lightning Talks & Lightning Toks 🎼
1 year agoAlright, we’ve officially got a streak going! I’m proud of how the loop came together for the TikTok version, but I like the extended YouTube version too!
4 items that make a difference working from home
1 year agoNew YouTube video! Spoiler alert, it’s these 4: 🎙💡🧑💻📷 This is the start of me posting videos every week, so I'll experiment with various video formats!
useMoreCustomHooks: A React PSA
2 years agoNew YouTube video! We’re going back to React, to talk about something we’ve been promoting within Zoopla actually ⚛️
Build First - Go live
2 years agoNew endeavour, a collaboration with one of my oldest friends, Marily Nika! First episode is all about how we want to build stuff with you and for you, and how we're going about launching this 🚀
How to use Tailwind.css with SvelteKit
2 years agoNew blog post! SvelteKit just cut its first beta, so I figured I should turn that YouTube video I made back in December into a written guide. It falls in that awkward spot where the setup isn't different enough to justify a reshoot... but different enough to need some follow-up 😅 this is it!
Milestones via Airtable
2 years agoThese milestones were a hardcoded array in the repo and, even though deployment is fast, I felt I would be adding more if I were bringing them in from a more... CRM-y datasource! So I've integrated with Airtable, got deeper into markdown parsing since I couldn't just use JSX in the descriptions anymore, and switched this page over to Incremental Static Regeneration 🚀 What a day!
Workshop Success: Pretty Interactive React
2 years agoI ran the very first workshop in Zoopla's productivity department! I had such fun, from designing it over the past few weeks to executing today, and there's great feedback already from the 30+ attendees 🎉 I made a little demo to demonstrate what we usually mean by "app-like feel"... feel free to have a look if you fancy experiencing a few seconds of this 2-hour project 😄
Piano - Started learning!
2 years agoI bought a Yamaha Arius and even found a cozy corner for it in my London flat! I’ve never played, but I’ve found myself listening to more and more instrumental piano... so I figured it’d be a beautiful skill for me to pick up 🎹 I can play some basic guitar, let’s see if that helps me get started!
Horizon Zero Dawn - credits
2 years agoAfter almost three years playing it on and off, I finished Horizon; including the Frozen Wilds expansion! It completely grabbed me over the holidays, the turning point being reaching Meridian. I strongly suggest making an effort to get to that city before judging whether to give up on the game: The format becomes a bit more “Witcher 3”-y, and the story is fantastic!
New start @ Zoopla!
2 years agoNew year, new permanent role: I’m now a Principal Engineer at Zoopla! If you’ve lived in the UK, I bet you’ve browsed through some property listings through us 🏡 It’s the biggest company I’ve seen with a meaningful culture project as a key goal, so I’m well excited to play a strong part!
Tailwind with SvelteKit
2 years agoNew “X with Svelte” YouTube video! A bit more substantial this time so a better "proof of concept" for a potential series, this time we’re putting TailwindCSS & SvelteKit together 🥰
How to setup VS Code with Svelte
2 years agoNew YouTube video! SvelteKit is teasingly close, so I’m thinking of starting a dedicated Svelte training site... This is a proof-of-concept I can actually produce that sort of video for it, and an exploration of how much time it’d take me. What better place to start than editor setup? 👨🏫'
How to add a custom Tweet CTA to your Next.js page
2 years agoNew blog post! A previous milestone was about adding a “sharing hub” section at the end of my blogposts, and this is the write-up of how I did it 😄
Ghost of Tsushima - credits
2 years agoIt had been a while since I last finished an open world game! The setting and combat in Ghost had me playing steadily through the months, and over the weekend I saw it all the way. The snappy load times and Guiding Wind system definitely played a huge part in keeping me engaged, and I got super-close to a 100%-ing! I’ll likely be coming back for the occasional Legends coop mode 🌸
How to BDD and E2E test your responsive web app with Cypress
2 years agoNew blog post! I have been streaming the live development of an app using the Marvel API, and we’re going full on BDD & mobile-first! This covers the BDD & E2E setup, and I will be writing a deep-dive on testing the mobile-first responsive design as well.
Share/Tweet blogpost CTA
2 years agoI’ve added a new section in each of my blogposts, with a button to tweet and a button to copy the link to that blogpost! Gotta make it easy for my lovely readers to share what I write 😄
Human-readable timestamps with Luxon
2 years agoNew blog post! I was updating my site to get rid of the essentially deprecated Moment.js and found nothing on how to do relative time with my replacement: Luxon. So I wrote this quick how-to!
Epic React contributor
2 years agoOpinionated Javascript educator and testing enthusiast Kent C. Dodds just launched Epic React! It’s a series of interactive workshops for leveling up your React and frontend architecture skills... and I’m a contributor! Small fixes, but it’s great to contribute at something so many fellow engineers are perusing!
Lunch & Learn: Productivity Protips
2 years agoI presented my top two methods for planning & executing for maximum productivity without pulling out your hair, as well as a lightning round of smaller protips. I may adapt this to a public talk, maybe through a Twitch stream, or an Instagram live, depending on the interest!
New start @ DREST!
3 years agoI am starting a new permanent role, as a tech lead at DREST! They make a stylish fashion game for iOS and Android, so a chance to combine app development with my photography instincts 📷
Coding Challenges - Cycling Element
3 years agoMy first ever “public” challenge, and accompanying post for those subscribed to my newsletter, is now out! Definitely a proud moment, check it out 😄
First ever coding stream!
3 years agoIt finally happened: I live-streamed some code. It was extremely enjoyable and I can’t wait to do more and tweak things further!
How to setup MDX in Next.js
3 years agoNew blog post! Burying the lead, as a big milestone is that I brought in blogging functionality to this very site, and everything new I write will be hosted in-house 🎉 Starting with this article, detailing how I did it, so you can do it too 😉
First ever "branded" stream!
3 years agoRan a poll on the gram for what type of stream it should be, no surprise that audience wanted a photo tutorial 📷 Super exciting to do, I felt great and am definitely hungry for more!
Top Three Things
3 years agoNew week, new app! Got "Top Three Things" all the way from idea to "functional prototype", figuring out Hasura GraphQL in the process. This idea has legs...
Website analytics with Next.js and Plausible.io
3 years agoNew blog post! Let’s add website analytics to our Next.js React app the simple and privacy-friendly way, and with Typescript support!
magrippis.com - contact form
3 years ago"Get in touch" now links to a proper contact page, where I suggest the mailing list too! Trying out Postmark as the transport.
Final Fantasy VII Remake
3 years agoIt’s finally available to play! Just from the first couple of hours I can tell this is an impeccable execution of the project. Not that it’s gonna be the perfect game, but they’re making me experience the essence of playing the original back then in PS1, via the means of a current-gen AAA game.
Animal Crossing: New Horizons - credits
3 years agoI wasn’t expecting Animal Crossing to have end credits, but there actually was a little storyline that gets nicely wrapped up with a proper credits sequence! The game continues after of course, and I’m far from done with it: A few minutes of island life have become part of my morning ritual 🍑
Coding Challenges newsletter
3 years agoAfter feedback from friends and colleagues, I’ve set up a newsletter about the coding challenges I always find myself designing! You should join too 😁
magrippis.com - v3
3 years agoThis very site! A long way from the Angular and php version five years back 🤯
Healthy Habits
3 years agoNew app! A collab with Alison, our submission for a COVID-19 global hackathon. An app which suggests what to do to keep sane while using your browser, and rewards you with cute pets for maintaining streaks.
The roles in App Development
3 years agoNew blog post! Working in a London Startup, it’s easy to forget the roles involved in creating an app are far from self-explanatory... Let me demystify!
First parallettes workout
3 years agoWith the gyms closing due to COVID-19, I got a pair of parallettes to practice at home! They’re elevated bars you may practice things like handstands on. I’ve never had good balance so this wiped me out something fierce!
Animal Crossing: New Horizons
3 years agoI’ve never really gotten into Animal Crossing, but the time is calling for a low-stakes, chill game... And I want to follow along with the MinnMax game club!
Endless meeting cubing loop
3 years agoInspired by endless meetings where the same people keep saying the same things, I shot a little pattern I found myself mindlessly doing.
Emoji of the X - Twitter bot
3 years agoAdded functionality to the backend to auto-tweet whenever it makes new picks!
Google Analytics with React Router
3 years agoNew blog post! Inspired by trying to add Google Analytics in a Create React App with React Router earlier.
Emoji of the X
3 years agoNew app! Surprised by the lack of something which picks the official emoji of the day / week / month, I went and made it myself!
Why would you want to learn React in 2020?
3 years agoNew blog post! React has been my cornerstone for getting people into software engineering for years now: it’s time for a sanity check!