Wax on, Wax off

The reason I got into web development in the first place was the magical ✨ feeling you get when you see your code manifest in the browser.

In my current role at work, I don’t do much of that anymore. And I guess I kind of miss it. Especially the part when I am given a clearly defined outcome, with clear guidelines. Perks of being labelled a senior, I guess. 😜 But I digress.

Since I started with React, a lot of things have happened in web development. At the moment, I’m especially interested in Svelte and TailwindCSS and after watching Rich Harris’s latest talk “Futuristic Web Development”, I needed an excuse to try Svelte ASAP.

Staying sharp with deliberate practice

To ensure my frontend skills don’t wither, I would like to spend dedicated time each week to practice on a set of frontend challenges and reflect on what I learnt from them.

Fortunately, I recently discovered FrontendMentor.io and this website offers quite the list of frontend challenges, ranging in difficulty and consistently with nice designs.

Improve your front-end coding skills by building real projects

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

— FrontendMentor.io

And to practice with new frontend technologies, it’s good to find nice designs. But it’s even better when they come with a style guide and assets like pictures and icons. 😍

Here’s how it works:

1. You choose a challenge and download the files.
2. You attempt the challenge with the stack of your choice. Because the challenge files come with a style guide, the necessary pictures and icons, etc. it’s really easy to get started! (Unless you spend hours deciding which stack to use, of course 😂)
3. You upload it to GitHub and deploy your attempt on Vercel or Netlify.
4. Finally, you submit your solution through your challenges dashboard on the platform.

You can then get feedback on your submissions and provide reviews for other people’s submissions too, which I find really cool. I remember how difficult it was to get feedback when I was first learning web development.

Learnings

The last challenge I attempted looked pleasing on my eyes and I honestly did not expect I would learn so much from it. That makes me want to practice even more!

I encountered the following problems to complete the “Social media dashboard with theme switcher” challenge:

• setting up Svelte with TailwindCSS (thank you Swyx and Chris Dhanaraj)

• implementing a toggle component from scratch

  • without accessibility in mind (where I started: W3Schools 😅)
  • with accessibility in mind (where I ended up: Smashing Magazine, though I’m not sure how to test if my current solution is the most accessible)
• implementing a theme switcher in Svelte (inspiration from this Svelte REPL)
• adding a border with a gradient to a block element (this requires using a CSS trick from nowhere else but CSS Tricks of course)
• pulling my hair for not realising that you need the group class for group-hover: modifiers to apply in the children with Tailwind (thank you Estevan Maito)

• how to extract the imported Svelte components’ props’ TypeScript types (that’s a mouthful!), instead of exporting and importing the types directly (TL;DR: use $$props_def from the component)

  <script lang="ts">
  import MyComponent from './MyComponent.svelte';
  
  const data: MyComponent['$$props_def']['data'] = ...
  </script>
  
  <MyComponent {data} />
  
  ...

• deploying a “monorepo” on Vercel without redeploying all the folders all the time by specifying the “Ignored Build Step” with something like git diff --quiet HEAD^ HEAD -- subfolder-in-monorepo to only rebuild the site if changes were made in subfolder-in-monorepo.

Here’s the GitHub repository where I will learn in public and add future challenges I will attempt. (Though I might need to rename this repository in the future as I just found this really nice list of project ideas to build with other platforms than FrontendMentor.io 😉)

Let me know in the comments what your current deliberate practice is!