Anna Codes

Who needs another coding blog?

Me! I do. AI tools are making it easier to build websites and apps, but it's all too easy to switch off the brain and let the tab key do the work for you. So how do you balance the undeniable benefits of increased productivity, with long-term personal development and keeping your own skills sharp? This is where annacodes.dev comes in. I'm making a deliberate choice to make time every week to:

• learn a new skill, language or framework
• deep dive into a skill I already have knowledge of
• build from scratch something which I usually use a library for
• or simply tick something off my dev bucket list

Building this blog ticks off a little bit from each of these goals.

Working On a New Skill: Design

I'll be honest, although I consider myself creative, the prospect of designing this site completely from scratch was a wee bit daunting. I didn't want to create something you might see on any old Bootstrap template. I wanted this site to feel personal. Not too dry and information-dense, but not a style-over-substance assault on the senses.

The color scheme came from a combination of my love for earthy tones and the need for good contrast (both of my original colours were darkened to meet AAA standards). I thought it would be interesting to subvert the expectations of a tech blog and go for a warmer, more natural palette.

I wanted the site to feel interactive, 'alive' without being too distracting. The timeline component was a key part of this. With my non-traditional journey to code it seemed like a good way to lay it all out visually and show how it all came together.

Finally, the most important piece of the puzzle - the logo. After spending some time with online AI logo generators, nothing seemed to fit what I was looking for. I realised a bespoke solution was needed, so I reached out to my good friend Aurora Suominen and told her what type of thing I was looking for. Within a day I had a beautiful, hand-drawn logo that I'm proud to show off. Thanks again Aurora!

Logo options in my main theme colours

The Deep Dive

I use PHP at work every day, sometimes building from scratch, but more often using frameworks and libraries or updating existing code. So I decided to build my portfolio using only plain PHP, CSS, and JavaScript - no Laravel, no React. Even avoiding library imports (except for the odd Lottie animation). That being said, for spam protection and email security I'm trying out Formspree for the contact form.

To keep things simple to start with, blogs are stored in JSON files, with the content populated onto a blog template. I chose to use CSS custom properties (variables), which helped me maintain consistency across the site and experiment with different color combinations without using SCSS. Javascript does the heavy lifting for the animations and interactions.

A very sad looking PHP elephant courtesy of alekseynemiro on Pixabay

Sliders from Scratch

There are a lot of great card/slider libraries out there - I'm looking at you Splide- but I wanted to build my own from scratch. I've always wondered how those libraries work under the hood, managing active slides, responsive design, and touch interactions. So this seemed like the perfect opportunity to find out.

Keyboard navigation was simple, and mobile swipe handling wasn't too much more complex. The key was only initiating the swipe is complete, and tracking the position of the touch at the start and end of the swipe. This way you track which direction the user is swiping, but the cards only change when the user has lifted their finger. No jumping cards at the slightest touch.

The slider update function - only called once the swipe is complete/key is pressed. The 'active' card is at the base position, while the 'prev' card slides offscreen to the left (with translateY()). Inactive cards wait hidden to the right and slide into the center when they become 'active'.

Ticked Off the List - Coding Blog

I've always been full of ideas for coding projects, but never had a plan for how to share them. Between this, and the benefits of talking through a project to solidify my own understanding, a coding blog was the perfect solution. This is still early days, and more will be added as I go, but for now I'm happy to have ticked off the list!