🍞 & 🧈: Magically load data with SvelteKit Endpoints7 months ago
New 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 📢8 months ago
New 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 🧪8 months ago
New 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 Tailwind9 months ago
New 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! 🪄10 months ago
New 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! copy1 year ago
New 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 ago
New 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 SvelteKit1 year ago
New 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 ago
New 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 MSW1 year ago
New 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 ago
New 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 Svelte1 year ago
New 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 ago
New 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 ago
New 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 ago
New 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 ago
New 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.js1 year ago
New 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.js1 year ago
New 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 ago
Analysing 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 ago
Alright, 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 home1 year ago
New 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 PSA1 year ago
New YouTube video! We’re going back to React, to talk about something we’ve been promoting within Zoopla actually ⚛️
Build First - Go live1 year ago
New 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 SvelteKit1 year ago
New 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 Airtable1 year ago
These 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 React1 year ago
I 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 ago
I 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 - credits2 years ago
After 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 ago
New 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 SvelteKit2 years ago
New “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 Svelte2 years ago
New 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 page2 years ago
New 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 - credits2 years ago
It 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 Cypress2 years ago
New 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 CTA2 years ago
I’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 Luxon2 years ago
New 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 contributor2 years ago
Lunch & Learn: Productivity Protips2 years ago
I 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!2 years ago
I 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 Element2 years ago
My 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!2 years ago
It 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.js2 years ago
New 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!2 years ago
Ran 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 Things2 years ago
New 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.io2 years ago
New 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 form2 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 Remake2 years ago
It’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 - credits2 years ago
I 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 newsletter2 years ago
After 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 - v32 years ago
This very site! A long way from the Angular and php version five years back 🤯
Healthy Habits2 years ago
New 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 Development2 years ago
New 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 workout2 years ago
With 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 Horizons2 years ago
I’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 loop2 years ago
Inspired 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 bot2 years ago
Added functionality to the backend to auto-tweet whenever it makes new picks!
Google Analytics with React Router2 years ago
New blog post! Inspired by trying to add Google Analytics in a Create React App with React Router earlier.
Emoji of the X2 years ago
New 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?2 years ago
New blog post! React has been my cornerstone for getting people into software engineering for years now: it’s time for a sanity check!