In the past few weeks, I had the opportunity to help out in the planning and running of the Work Experience week in Sunderland Software City. It was a fun and challenging task, especially due to its limited planning time.

In the past few weeks, I had the opportunity to help out in the planning and running of the Work Experience week in Sunderland Software City. It was a fun and challenging task, especially due to its limited planning time.

## Initial Meeting

Our first meeting was 2.5 weeks before the start of the Work Experience Week. Our director gave a brief on what the work experience was meant to be - a “feeler” experience for people to see if software development is something that they’d like to get into. For my Indonesians out there, think [Kidzania](https://kidzania.com/en/what-is-kidzania#section-0); less roleplay, more actual work.

Our director has already had a first schedule drafted. She asked us (the devs) to have a look and change it to however we see fit. We ended up removing some things, moving others, until we reached a schedule like [this](https://www.notion.so/Schedule-for-Work-Experience-1313c260db4680b79610f624ed6c8781?pvs=21). Our first draft, the schedule was just put in a Word document, with no time approximations. I find it easier to read schedules in a table with specific times. This allows me (and others) to have a point of reference when running the event; whether we are rushing/dragging.

I volunteered to take notes, just because it’s another opportunity for me to use Neovim (by the way). I am also basically a pro in Markdown now, from writing so much High Quality Pull Requests. The actions to take in this meeting: developers, go find projects/ideas for a simple program that these students can complete in 2.5 days. Ideally, we would have 3-5 project ideas that students can choose from.

## Research

My first plan was to propose a recipe app. A very simple baseline functionalities, and can be extended very easily if students want to use this as a “take-home” project. It’s a basic CRUD app - who doesn’t like CRUD apps? Writing this idea down also made me realise that most web-apps (I can think off) are just CRUD wrappers. Funny thought.

A second idea is a flashcard app/game thing. This came up because I was supposed to build something similar to this for my girlfriend, who needed to memorise 40+ cocktail recipes for her job. She managed to do it before I even initialised this app.

At its core, flashcard is quite simple too with high extensibility. Base functionalities only include adding new flashcards with 2 or more pairs of questions and answers, and everything is stored in the server’s memory. This limits complexity, but gives enough context to the students on how a client-server architecture work in code.

## Projects Preparation

We had another meeting to discuss which project ideas should be fleshed out into a good stubbed out codebase, served as a jumping point for the students. My recipe app was heartily laughed out the room. *”It’s just a todo app! Why do you like a Todo app so much, Shawn?*” Leave me alone I get it I’m boring and the worst colleague ever. However, the Flashcard app was received with open arms. Maybe they just felt bad I crashed out.

Preparing the codebase was more work than I thought. My first implementation was a pure client-side app with vanilla HTML, CSS, and JavaScript. Lots of manual DOM manipulation to change the content of the HTML with JS, and user-feedback mostly uses the `alert()` function - mostly because it’s straightforward and simple. The second implementation, after feedback from our senior developer, was to use a server-side rendered solution. We ended up using Express.js with Nunjucks as a view engine.

Using SSR with bare Express means that I had to use forms to communicate with the server. I also got the chance to implement the MVC architecture on Express.js. Furthermore, I cooked when writing the `readme.md` ; check it out [here](https://github.com/shawnanuptra/express-nunjucks).

After making sure I *know* I can build it myself, I removed code and replaced them with TODOs to guide the students when implementing the code. I try to insert *hints* not answers, also referring them to documentation.

I really put my 100% into this mini-project. I tried so hard to create an impactful, worthy work-experience for these students. Which disappoints me even more that NONE of the 9 attendees chose my project to work on. ZERO!!! I was so close to crashing out in front of them but we move. I remember all their names and will find out where they live.

## Final Touches

All the projects are on a private Github repo. Laptops were prepared, and I have created the final schedule using Notion, passed it around with Notion pages. Pretty nifty. One problem: it’s 4pm on a Friday, and we need to *at least* fill a 1 hour gap with a lecture-style content about “Introduction to Software Development” by Monday. Me and a colleague that stepped up joined forces to create a presentation. My parts cover SDLC, and his covers basics of webapps, roles within software, software used, etc. The goal is to have introduction content so students can have a basic understanding of what we do. Both of us worked through the weekend to produce a presentation and practised it, you can see the slides [here](https://www.canva.com/design/DAGVPcacM4U/sU1PAgfe0v5QPLFsPZD6Zg/edit?utm_content=DAGVPcacM4U&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton).

We were supposed to have more content in the following days, but the stress of executing this work-experience week perfectly was slowly debilitating me. I was entrusted (well, mostly volunteered, but trust was put in me) to plan and run the program. In a weird way, I was also unsure of my responsibilities - am I overstepping my boundaries? Am I being too eager? I know running events/planning is a strong suit of mine, but am I taking opportunities from others? My anxiety-riddled (lack of) sleep throughout the week did not help. Well, we could only take it one day at a time.

## Go Time!

I only practised my presentation twice - once after creating it, and the second time in the office while waiting for my turn to come down and talk to the students.

I walked up to the front of the hall, connected my HDMI, and took a sharp breath. A short introduction to who I am, loaded up Canva, and I kept on yapping.

It was a good yap! Students seemed to be interested and engaged. It probably helps that I bribed them with a free crisp (most correct answers at the end of the presentation got a bag of crisp but I felt bad for others so I got everyone a crisp during lunch). I was surprised - I wasn’t as nervous as I was during practice. First presentation went smoothly and I hope I have gained respect from the students.

Afterwards, my ego was stroked by my colleagues who were impressed by my presentation. It was a good price to pay, I think (10 quid for the crisps). Some say I’d make a good teacher. Maybe it’s a sign? Nah I got mad respect for teachers but respectfully I’d like to not be poor 😭

The rest of the days went well - no more presentations, just mostly practical activities that the students partake in, such as breaking down project requirements with MOSCOW (Must or Should, Could or Won’t), wireframing, and building the projects itself. More people never coded than previously thought, so my senior made the clutch decision to try to use a no-code solution for one of the projects, Streetlight Damage Report web app.

I ended up overseeing this Streetlight app group, where we explored Bubble, a no-code solution. I said we because I have never used Bubble before. Within 20 minutes though, I managed to know how to trigger events and creating a simple database to store Streetlight data. Unfortunately, I did not figure out how to create a mobile responsive layout - so I just forced people in my group to limit the canvas to 360px width, to mimic a mobile phone.

Mentoring these students was an interesting experience. Due to the varying levels of exposure to code and web development in general, I had to think about how to break down things simply. I had to explain what a query parameter is! Showing real examples, such as the `google.com/search?q=this+is+question` helped piece together the concept.

Celebrating wins such as a new concept understood, or a part of the challenge done with the students was important, both to keep the student and myself engaged. There was one particular student who was quite hard on herself. She was brilliant and pick up things quickly, but she talks down on herself quite often. I pointed it out several times, and my hope is that she recognises it and start being more proud of herself. But anyway, this is way out of my domain of expertise - I wish her all the best.

The final day was finishing off projects and presentation time! Students were asked to present their work and what they learned this week - any challenges encountered, what they like, what they don’t like, etc. It was great seeing everyone present their work. I can proudly say everyone involved have gotten something out of this experience.

## Final Thoughts

It was a fulfilling experience, for sure. It was stressful at first, however that was also because I did not know what a work-experience look like. With a picture in mind, I’m certain the next work-experience week would not be as stressful. I have successfully expanded my comfort zone. I am still a wee bit hurt and disappointed no one wanted to build my Flashcard app, but I am glad everything went well. The only downside in this experience was that I had no time to start my Laravel studies for an upcoming project - I am a week behind on material. No worries though, I’m currently watching Laracast’s 30 Days Laravel in 2x speed!

My efforts was also recognised by the director and my senior developer. That was like crack. Feels good to be recognised, man.

Becoming A Mentor

Accessibility is important, but no a lot of people think about it. This is frustrating, but awareness can be improved through educational content.

It’s 2024. Inclusivity is preached and its value held high. It’s a badge of honour for a company or an entity to be labelled ‘inclusive’. University of Sunderland was honoured “University of the Year for Social Inclusion” in 2021, and you can still see banners of this achievement around campus in 2024. It’s *cool* to be inclusive. So why is accessibility not a priority when building websites?

Accessible websites are inclusive websites. People living with disabilities and/or sensory issues should not be deprived of the experience the able bodied receive. Thus, building an accessible website *should* be a matter of importance; more developers should at least *think* about accessibility when building their sites. Developers need to be more aware of accessibility. One critical way to improve this is improving the educational content.

I am currently a junior developer. I still have fresh memories of following along tutorials, learning how to build different interfaces and connecting them to a backend. What I don’t have a memory of, is the tutorials explaining accessibility, or even using the simplest semantic HTML to build the UI. Even back in university, accessibility was just glazed over. “Just use semantic HTML!”

You might be thinking, *“Oh it’s just a poopy tutorial!”* or *“Your uni is just crap!”.* Wrong - my YouTube algorithm is goated. In addition, I talked about this with my colleagues and they felt similar. If you suggest looking up specific accessibility tutorials, this just further proves my point that accessibility is seen as something separate when building UI - an afterthought. It would be so much better if most of the UI tutorials include accessibility features built in, so most starting devs have a better understanding of the thinking process when building accessible websites even with no experience. I recognise that this is anecdotal evidence, however I dread doing research for a more concrete evidence and decided to just write this opinion piece.

A lot of aspiring developers learn from the free content on YouTube. If these tutorial videos intertwine accessibility concepts when building interfaces, I believe this will increase the awareness of accessibility in the web. Simple things such as using correct semantic HTML, and knowing that a screenreader reads the document from top-to-bottom.

I have learned the importance of accessibility and how to implement basic accessibility features  through my senior developer at work. During code reviews of a client project, the topic of accessibility comes up all the time, and suggestions on how to improve my code. Take this card for example:

 
![](https://cdn.sanity.io/images/3ptg6uji/production/5baf4cabde58e54dcc678f36e9a18c0034705d8c-498x488.png?w=450)

How would you create the markup of this card? Visually, the image will be marked up first, then the title, author, etc. However, if a screen reader was to read it, it reads the markup from top-to-bottom. Hence, marking up the title and author of the card first would make more sense, using `flex-direction: column-reverse` to visually put the image on top.

On my first draft, the card is a “div soup” - the markup contains no semantic meaning. After multiple reviews, it is now an `<article>`, containing a `<header>`, with the image wrapped in `<aside>` as its mostly a decorative image; not essential to the context of the card.

My senior developer also put us through a semantic HTML exercise. The task is to recreate the LinkedIn post element [here.](https://www.linkedin.com/posts/sunderland-software-city_techskills-developers-northeast-activity-7227265331172388865-Ali_/) What surprised me is how *wrong* the markup feels when inspecting the elements. For example, paragraphs in the post are marked as `<span>` instead of `<p>`, while the WCAG spec clearly states `<p>` is used to denote paragraphs.

While LinkedIn might have a good reason on why these decisions are made, this exercise made me realise how much better we can do on making the web more accessible, even just a little bit. Even just the use of the correct semantic HTML elements would go a long way. My next project (and post) would be about changing this very website you are currently on to be more semantically correct and accessible.

Being an Inclusive Developer

A brief overview of my first month experience as a junior developer.


It has officially been (almost) a month since I started my job as a junior developer. It has been eventful. Working in a team, attending a conference, and being assigned to work on a project for a *real* client. Exciting times!

## Working within a Team

Outside of the one group assignment in university where there was only two people (me included) in a group of seven that meaningfully contributed to a project, I have never worked in a team before. All the other projects I have developed are all done by me. Solo. It was never by choice - it’s not like I am against working in a team (though the 2nd year assignment nearly radicalised me), I just never had the opportunity to work in one.

And it has been nothing but great. All of my colleagues are cooperative and hungry, everyone wanted to keep moving forward and learn. It is inspiring to be amongst like-minded people. Surprisingly there has been no major disagreements in the team yet, we’ll have to wait and see.

I learnt about working in Agile. From planning the sprint, daily stand-ups, using a project management tool (we use Linear), and post-sprint evaluation. Though we don’t have a scrum master or product manager, I think I am starting to understand, in a small scale, the flow of delivering a project.

Merge conflicts are the bane of my existence. I hate it so much. I *think* I know how to solve them, but I’m not sure if it’s the *correct* way to do it. Meh, I’ll get better at it.

## Client Project

I was surprised when I was called to be one of the two developers to work on the first client project. The feeling of ecstasy was almost immediately overshadowed by a looming sense of inadequacy. What if I fail to deliver? I barely know how to deploy a website! Luckily, I have a great mentor that I know will not let whatever we develop go off the rails. He also broke down all the requirements of the project into reachable goals for us junior developers. My absolute GOAT.

As of writing, we just finished doing a wireframe prototype of the project, and presented to our client. The feedback was good. Next step was to actually start developing the web app! Since it’s going to be in Svelte, I have spent the past week trying to learn Svelte and SvelteKit. It has been quite challenging and interesting. I have very little experience with it, but it feels more lightweight and granular than Next.js. It feels like I’m *touching* the DOM directly; feels very *transparent* and less black-boxy. Not sure why, need to experience Svelte more to be able to put it into words. It literally might just be placebo because Big React == Bad.

## Conference

Not going to get into it, find it [here.](https://www.shawn-am.co.uk/blog/my-first-conference) Spoiler: it was frikkin awesome.

## What’s Next

As of today, we were told to start working from home due to the Sunderland riot that happened a few days ago. I am just going to keep doing what I’m doing, looking to improve day by day. My current goal is to be as good with SvelteKit as I was with Next.js in the next couple of months. I simply want to diversify and master my craft.

The WFH policy was just a precaution; a precaution I truly appreciate. What happened throughout the UK was disgusting. The misinformation used to incite violence is utterly vile. If I’m scared of going out in the streets of Sunderland, I can only imagine the people who were targeted must feel. Alas, I can only be responsible and stay safe while the government and police deals with the situation. I urge everyone to keep safe and look out for each other.

First Month as a Junior Developer

I got the opportunity to attend Middlesbrough Front End Conference 2024 for free. I thought it was going to be cringe, surprisingly it was great!

I went to my first conference. It was Middlesbrough Front End. The sun was shining unusually bright; its soft, warm light blanketed me. I didn’t know what to expect - my closest experience to this was a networking event in Newcastle. I disdain the idea of a networking event though. People only see you as an asset; what you can provide. Your worth is a direct correlation to where you work and what you do. However, I did have a decent time on that event. I even got lucky and got an interview offer!

Upon arrival, I quickly got signed up, collected my goodies, and headed straight to get coffee. It wasn’t long until my chats with my coworkers were cut short with an announcement that the talks are starting. We waddled into the hall and sat.

With my notebook out, my pen in hand, I was ready to learn.

## The Talks

First up was Daniel Roe, the only person I recognised from the lineup. I saw his talk back in Newcastle! He talked about meta frameworks - frameworks built on top of frameworks. Next.js on top of React, SvelteKit on top of Svelte, Nuxt on Vue, etc. A cool talk to start out the day.

Lu Wilson is up next with a change of pace. She demonstrated a bunch of cool things she could make in TLDRAW, the company she worked for. Imagine, what if you could draw a shitty mockup of a stopwatch, and with multi-modal AI, get a working HTML snippet with a UI? Pretty dope stuff! Lu also mentioned about having a constant feedback loop in the application (in this case, user and AI model) made things more *fun;* more *engaging* for the user. Happy to hear that she got a raise as well.

Victor Adewusi talked about the use of Web Workers: offloading heavy computational to the Web Worker API so that the application itself does not break under heavy load, leading to better UX. I never worked with Web Workers before, but it’s definitely on my radar now.

Time zoomed past and it was time for the first break.

As the talk continues, I was enthralled by each and every one of them. Everyone had something of value to share, and as someone who is literally a week old in the industry, I did my best to absorb as much information as I could.

I love CSS, so the talks by Michelle Barker and Brecht de Ruyte did resonate with me exceptionally. Michelle talked about using more modern CSS features such as minmax() or clamp() to make fluid layouts. Brecht talked about the future of CSS, and how the team in Open UI is trying to make the native CSS better and better. I was giddy with excitement when he mentioned the popover API, and the possibility of styling dropdowns or the sort in the near future. I damn near **`[redacted]`** myself.

Lex Lofthouse brought the basics of design to the audience. Hierarchy, Proximity, Contrast, and Balance. I think most people have a natural understanding of these things, but it takes a different set of skills to identify these and put it into practise. I changed my personal website around after recognising *why* it doesn’t feel right. Thanks Lex!

Michaela Reaney talked about the importance of ~~soft~~ *human skills.* Anuradha Kumari raised awareness on the importance of a11y (accessibility - yeah I’m cool now) and the steps we developers can take to make the web more accessible. Esther Adebayo talked about how current CSS-in-JS mostly doesn’t have the same weaknesses as before, as they can be compiled during build time. Salma (WhitePanther) showcased some fun projects she built on Twitch to be used in her streams, and Harry Roberts talked about the thinking process of a performance engineer.

I was barely able to process all of the information I got from the presenters. Bringing a notebook was a genius move by me - I had resources scribbled down to review later. I was especially excited to review the CSS stuff I noted down!

## The Social

A majority of my colleagues have left - it was just me and 3 others. I thought about going straight back home because I was quite tired and I didn’t know anyone else in the building. *“It’s time to network Shawn! This is what a conference is all about!”* I hear you yap. Like I said before though, it seemed… cringe. 

I decided to wait in line to get a pint, just because one of my colleagues wanted to talk to someone she met earlier. Fortunately, we quickly end up talking to another group of attendees waiting for their pizza.

A few conversations later, I found myself split from the group. The lovely bunch of people I was talking to excused themselves to eat their pizza inside. But now I am alone and afraid, like a Year 1’s first day of school. I can’t leave now, I’ve only drank half my pint. I gathered every ounce of courage to come and say hello to Lu and Daniel.

I mumbled through a quick self-introduction, and they were both very welcoming. One thing led to the other and I find myself talking with people I (from the moment their talk ended) look up to. I have got the opportunity to discuss and share ideas with people who are dedicated to their craft. 

It was almost intoxicating how much passion they all had for what they do. You can practically see it oozing out. It was exciting to see them present on stage, yet it was another thing to talk to them directly. I did not want to leave.

## Train Back Home

Alas, four pints deep, I had to take the last train home. Everyone was so friendly, welcoming, and interesting, I even thought about getting a hotel just so I can hang out for an extra hour or so. But that would be irresponsible - I do have work the next day. I had to say my goodbyes.

I barely caught the last train, and a rush of emotions caught me off guard as I got comfy in my seat. I was relieved I clutched the train, but I felt melancholic. I felt incompetent, but also inspired. I was extremely grateful for the opportunity to *connect* with loads of people. At the same time, I was bludgeoned by this sense of sorrow. I felt *grief.* I might never get the chance to see any of them again.

I could not wrap my head around how people I just met, people who I, quite frankly, don’t really know, were able to impact me in such a profound way. Was it their expertise and dedication to their work? Was I seeking validation from people I view as great? Or perhaps, it was simply their pure, unadulterated aura.

Either way, lots to think about. Excited to apply the concepts I learned that day to my work.

## Final Thoughts

I never would have thought that attending a conference could greatly move me. I do recognise that this might just be a me thing - maybe I am just weird. I also recognise this might not be every conference; I was really lucky that my first experience went great. Regardless, my first conference was a success. I learnt a bunch of new things, I got to know lots of amazing new people, and I managed to get a few pints in. 

Attending this conference made me realise that I want to pursue this career. There are more amazing people to meet. More skills to learn. A great wave of inspiration has come, and I am excited to ride it.

P.S. I thought about going by Sam now. Still thinking.

Blogs

Becoming A Mentor

Being an Inclusive Developer

First Month as a Junior Developer

My First Conference