d:["$","div",null,{"className":"restrict","children":[["$","br",null,{}],["$","br",null,{}],["$","h1",null,{"className":"utils_header__o5HKb","children":"Search my notes"}],["$","$Le",null,{"allPostsData":[{"slug":"throwaway-prototypes","title":"Throwaway Prototypes","date":"2023-06-22","content":"\n\nFor the past couple of years I have grown fond of prototyping as a way of getting my ideas across to other developers. As part of my role at CapitalOne (Software Engineer - Internal Tooling), I've had the opportunity to come up with innovative ways to improve the developer experience at the company in a creative and fun way; it allowed me to explore new technologies and paradigms, and inherit new ways to architect and design products. Prototyping is not a topic that comes up often in my sphere, and it is definately not something I bring up often in conversations, however a recent Twitter post surfaced made me think a lot about the perceived value of prototyping as an engineer: \n\n\n\nWorking in a DevTools team, the customers I often created solutions for were other developers who were having a hard time; they were using tools that were slow, unstable, or sometime just plain unpleasant. Due to the size of the business, it meant that there was often a variety of pain-points that I could chose from to explore and solutionize. Some of my most recent successes include:\n - Designing and Implementing a Chrome Extension that summarizes CI/CD logs and surfaces solutions to those problems\n - Creating a centralized package manager that simplified onboarding and setup of new development environments\n - Creating an SSO wrapper that gave developers a drop-in solution to add Single Sign-On to any of their Lambda and Express applications\n\n\nPrototyping isn't always going to lead to buy-in, however it almost always comes with other benefits which enable upskilling and exploring new technologies. Its also worth noting that building prototypes in an enterprise is obviously going to be easier that in smaller companies where resources are limited; however, I would say whenever possible prototyping is a valuable practice. It allows software engineers to explore and experiment with new technologies, methodologies, and ideas. By creating a prototype, engineers can quickly validate the feasibility of a concept, identify potential challenges, and gather feedback early on. This iterative process of building and refining helps to minimize risks and making informed decisions before investing significant resources into development.\n\nMoreover, prototypes serve as powerful communication tools. They allow software engineers to effectively convey their vision and ideas to stakeholders, product managers, and other teams. A lot of the solutions I brought to life at CapitalOne originated as a simple proof-of-concept prototypes. These prototypes helped me imagine up the solution, and solidify the implementation details that were floating in my head; and once I had a tangible solution, it helped me convey the value to other parts of the business. This visual representation also helps bridge the gap between technical and non-technical stakeholders, fostering collaboration and alignment throughout the development process.\n\nI encourage my mentees and more junior colleagues to create proof of concepts for ideas they might have, and so far both them and I have seen an increase in not just their confidence, but their skills. In addition to facilitating communication, prototypes also enable upskilling and knowledge expansion. As engineers work on prototypes, they gain hands-on experience with new technologies, frameworks, or approaches. This provides an opportunity for professional growth, allowing them to stay abreast of the latest industry trends and sharpen their skills. Furthermore, prototypes often act as a playground for experimentation, encouraging engineers to think creatively and explore alternative solutions that might not have been considered otherwise.\n\nOverall, prototyping and building proof of concepts offer numerous advantages. From solidifying implementation details to garnering support, these early-stage artifacts help shape successful software solutions. By leveraging prototypes, engineers can validate ideas, communicate effectively, and foster a culture of innovation within their organizations. Embracing the practice of prototyping ultimately leads to more robust, user-centric, and successful software products.\n\n\n---\n\nP.S. At the time of writing, i'm attempting to prototype a Toy React server to better understand how it works at a meta-framework level; and so far I have learned a lot about React Server Components. I plan to do a write-up on this soon!","renderedContent":"

For the past couple of years I have grown fond of prototyping as a way of getting my ideas across to other developers. As part of my role at CapitalOne (Software Engineer - Internal Tooling), I’ve had the opportunity to come up with innovative ways to improve the developer experience at the company in a creative and fun way; it allowed me to explore new technologies and paradigms, and inherit new ways to architect and design products. Prototyping is not a topic that comes up often in my sphere, and it is definately not something I bring up often in conversations, however a recent Twitter post surfaced made me think a lot about the perceived value of prototyping as an engineer:

Working in a DevTools team, the customers I often created solutions for were other developers who were having a hard time; they were using tools that were slow, unstable, or sometime just plain unpleasant. Due to the size of the business, it meant that there was often a variety of pain-points that I could chose from to explore and solutionize. Some of my most recent successes include:

Designing and Implementing a Chrome Extension that summarizes CI/CD logs and surfaces solutions to those problems
Creating a centralized package manager that simplified onboarding and setup of new development environments
Creating an SSO wrapper that gave developers a drop-in solution to add Single Sign-On to any of their Lambda and Express applications

Prototyping isn’t always going to lead to buy-in, however it almost always comes with other benefits which enable upskilling and exploring new technologies. Its also worth noting that building prototypes in an enterprise is obviously going to be easier that in smaller companies where resources are limited; however, I would say whenever possible prototyping is a valuable practice. It allows software engineers to explore and experiment with new technologies, methodologies, and ideas. By creating a prototype, engineers can quickly validate the feasibility of a concept, identify potential challenges, and gather feedback early on. This iterative process of building and refining helps to minimize risks and making informed decisions before investing significant resources into development.

Moreover, prototypes serve as powerful communication tools. They allow software engineers to effectively convey their vision and ideas to stakeholders, product managers, and other teams. A lot of the solutions I brought to life at CapitalOne originated as a simple proof-of-concept prototypes. These prototypes helped me imagine up the solution, and solidify the implementation details that were floating in my head; and once I had a tangible solution, it helped me convey the value to other parts of the business. This visual representation also helps bridge the gap between technical and non-technical stakeholders, fostering collaboration and alignment throughout the development process.

I encourage my mentees and more junior colleagues to create proof of concepts for ideas they might have, and so far both them and I have seen an increase in not just their confidence, but their skills. In addition to facilitating communication, prototypes also enable upskilling and knowledge expansion. As engineers work on prototypes, they gain hands-on experience with new technologies, frameworks, or approaches. This provides an opportunity for professional growth, allowing them to stay abreast of the latest industry trends and sharpen their skills. Furthermore, prototypes often act as a playground for experimentation, encouraging engineers to think creatively and explore alternative solutions that might not have been considered otherwise.

Overall, prototyping and building proof of concepts offer numerous advantages. From solidifying implementation details to garnering support, these early-stage artifacts help shape successful software solutions. By leveraging prototypes, engineers can validate ideas, communicate effectively, and foster a culture of innovation within their organizations. Embracing the practice of prototyping ultimately leads to more robust, user-centric, and successful software products.

P.S. At the time of writing, i’m attempting to prototype a Toy React server to better understand how it works at a meta-framework level; and so far I have learned a lot about React Server Components. I plan to do a write-up on this soon!

\n","readTime":"3 minutes"},{"slug":"building-in-public","title":"Building in public","date":"2022-11-11","content":"\n\nFor a couple of weeks (months?) now, I have been playing around with the idea of a small API-first headless CMS. I started forming building blocks and planning they way it would look and behave. \n\nInitially it started off with curiousity around the logic behind what a headless CMS is; I was already familiar with coupled CMS' thanks to my previous work on SlantedPress — so this time, I was keen on working out what a headless approach would be (if I were to build one from the ground up). So I started [architecting, designing, and moulding an API](https://jumbled-dichondra-7a3.notion.site/NextCMS-ce699824a5cb439f822853e0c82dad46).\n\n![Figma designs of Inkly](/images/figma-inkly.png)\n\nWhen I first started thinking about this project, I knew I wanted the process to be product-driven, and from that I had planned to make the entire product React-hook-driven. When designing the initial design around some basic use-cases, I figured I wanted to try and make a powerful API and then have a bunch of React-hooks that could consume the endpoints and be super-easy-to-use™\n\nRecently however, Vercel and the Next.js team released Next.js 13; along with it came the introduction to the `app` directory. Find out more about it on their blog. As part of this release, they also introduced Server Components to the Next.js ecosystem - which cannot make use of hooks.\n\nIm excited about this release, but at the same time feeling a little knocked-back as all of the ideas I had would now need to be reformed if I was to make use of the latest Next.js 13 had to offer. \n\nMy hopes for this project is to get a better understanding of patterns and the logic behind headless CMS', push myself to become better at marketing my skills (_we both know I suck at this!_), and maybe make some connections along the way 😉\n\nIm looking forward to seeing what I can come up with and intend to fully work through this in public - so watch out for updates both on here, and the bird app!\n\nUntil then... ✌🏽","renderedContent":"

For a couple of weeks (months?) now, I have been playing around with the idea of a small API-first headless CMS. I started forming building blocks and planning they way it would look and behave.

Initially it started off with curiousity around the logic behind what a headless CMS is; I was already familiar with coupled CMS’ thanks to my previous work on SlantedPress — so this time, I was keen on working out what a headless approach would be (if I were to build one from the ground up). So I started architecting, designing, and moulding an API.

$\"Figma$

When I first started thinking about this project, I knew I wanted the process to be product-driven, and from that I had planned to make the entire product React-hook-driven. When designing the initial design around some basic use-cases, I figured I wanted to try and make a powerful API and then have a bunch of React-hooks that could consume the endpoints and be super-easy-to-use™

Recently however, Vercel and the Next.js team released Next.js 13; along with it came the introduction to the app directory. Find out more about it on their blog. As part of this release, they also introduced Server Components to the Next.js ecosystem - which cannot make use of hooks.

Im excited about this release, but at the same time feeling a little knocked-back as all of the ideas I had would now need to be reformed if I was to make use of the latest Next.js 13 had to offer.

My hopes for this project is to get a better understanding of patterns and the logic behind headless CMS’, push myself to become better at marketing my skills (we both know I suck at this!), and maybe make some connections along the way 😉

Im looking forward to seeing what I can come up with and intend to fully work through this in public - so watch out for updates both on here, and the bird app!

Until then… ✌🏽

\n","readTime":"2 minutes"},{"slug":"november-life-updates","title":"November life update","date":"2022-11-05","image":"https://darylcecile.net/r/images.unsplash.com/photo-1468245856972-a0333f3f8293?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGZvcmVzdCUyMGJ1cm58ZW58MHx8MHx8&auto=format&fit=crop&w=1024&q=6","content":"\n\nSo im pulling this from [Carol](https://carol.gg/)'s book an attempt to provide you with a [lifenote](https://twitter.com/carolsaysthings/status/1587174153190268929?s=61&t=jXDDwfGAQLaMRy52o0w4Qg)-esque life update. Since my last post, a lot has happened;\n\n- Ive done a couple of house viewings throughout London\n- Panther has officially moved down to London\n- Ive completed work-related paper work in preparation for the move\n- Booked a couple more viewings\n- Finalized the [closure of PF](https://web.archive.org/web/20220711151132/https%3A%2F%2Fprojectfunction.io%2Fnotes%2Fthis-isnt-farewell) 🥹\n- Started putting together a rough plan for my next side project (Exciting times ahead - Keep an eye out for a post 🤞🏾)\n- Panther and [Mastoo](https://twitter.com/rizbizkits/status/1545162625411153923?s=46&t=B1zScKx5_gYSKx0sedQ1-w) have found comfort in each-others company 🖤\n\n![Mastoo and Panther on the stairs](/images/mastoo-and-panther-stairs.png)\n\nTwo weeks ago, I found myself in a bit of a rut. The hectic lifestyle i've been trying to keep up with, together with the extremely brutal renting market had led to me spiralling a litte — and it wast until my manager had brought it up that I had realised that I had not been spending any time on myself. Since then i've been trying to make more time for self-care:\n\n- I started watching Netflix again (My latest watch being From Scratch - which I highly recommend!)\n- Treated Will and I to a Spa day at Bannatyne Health Spa in Mansfield\n- Made some time to work on the designs for my upcoming side-project\n- Signed up to [BeReal](https://bere.al/dcjoa) to see what the hype is all about 👴🏾\n- Endulged in a Portobello Mushroom, Ricotta and Garlic brunch at a newly discovered [eatery](https://maps.app.goo.gl/VfbxqFcovcLhof3Y6?g_st=ic)\n\nAll of this made possible by finding a temporary home for Panther, which allows me to stay down in London for viewings - rather than travelling down every weekend.\n\nLast weekend, Panther and I made our way down to London from Nottingham, and then trekked across the city to [Augustina](https://twitter.com/@AugustukazB) who had kindly offered to house Panther until our housing situation was sorted. The poor boy had a very stressful trip but thankfully he has recovered and and is now enjoying the company of Aira 🖤\n\n![Aira in her elements](/images/aira-cat.jpg)\n\nStay tuned for some incoming pictures of Aira and Panther together 🐈‍⬛\n\n","renderedContent":"

So im pulling this from Carol’s book an attempt to provide you with a lifenote-esque life update. Since my last post, a lot has happened;

Ive done a couple of house viewings throughout London
Panther has officially moved down to London
Ive completed work-related paper work in preparation for the move
Booked a couple more viewings
Finalized the closure of PF 🥹
Started putting together a rough plan for my next side project (Exciting times ahead - Keep an eye out for a post 🤞🏾)
Panther and Mastoo have found comfort in each-others company 🖤

$\"Mastoo$

Two weeks ago, I found myself in a bit of a rut. The hectic lifestyle i’ve been trying to keep up with, together with the extremely brutal renting market had led to me spiralling a litte — and it wast until my manager had brought it up that I had realised that I had not been spending any time on myself. Since then i’ve been trying to make more time for self-care:

I started watching Netflix again (My latest watch being From Scratch - which I highly recommend!)
Treated Will and I to a Spa day at Bannatyne Health Spa in Mansfield
Made some time to work on the designs for my upcoming side-project
Signed up to BeReal to see what the hype is all about 👴🏾
Endulged in a Portobello Mushroom, Ricotta and Garlic brunch at a newly discovered eatery

All of this made possible by finding a temporary home for Panther, which allows me to stay down in London for viewings - rather than travelling down every weekend.

Last weekend, Panther and I made our way down to London from Nottingham, and then trekked across the city to Augustina who had kindly offered to house Panther until our housing situation was sorted. The poor boy had a very stressful trip but thankfully he has recovered and and is now enjoying the company of Aira 🖤

$\"Aira$

Stay tuned for some incoming pictures of Aira and Panther together 🐈‍⬛

\n","readTime":"2 minutes"},{"slug":"project-spotlight-campus","title":"Project Spotlight: Campus LMS","date":"2022-09-03","image":"https://darylcecile.net/images/spotlight/campus/campus_lesson.png","content":"\n\n\n This LMS was created for ProjectFunction, which closed its doors in May 2022. See an archive of it on the project page.\n\n\nFor those of you who have not been keeping up with my adventures lately, [Rizwana](https://twitter.com/rizbizkits) and I [ended a PF session for the last time](https://web.archive.org/web/20220711151132/https%3A%2F%2Fprojectfunction.io%2Fnotes%2Fthis-isnt-farewell) in May after the successful completion of wave 9. Since then, I have gone for a well-needed holiday, replacing my mental and emotional burns with physical ones. \n\nDespite existing and providing a digital learning experience for the past 3 years, Campus has never been seen outside of ProjectFunction. So I thought id take a moment to spotlight Campus - the LMS that I have been working on and maintaining for PF for a couple of years. \n\n![Campus Login screen](/images/spotlight/campus/campus_login_page.png)\n\nSince the inception of v0.1, Campus has had 3 major updates; bringing about a new look, scalable infrastructure, and user-segmented data storage. These changes allowed Campus to grow with PF, as demand and userbase grew.\n\nBy the final version of Campus, we were able to bring about the following features which helped improve the experience for individual instructors, as well as learners:\n \n- **Knowledge tracking**: Allows instructors to review cohort progress and adjust content delivery methods to optimize learning\n- **Lesson recaps**: Learners were able to review any previous lessons and access the relevant assignments, worksheets, and cheatsheets\n- **Automatic feedback**: Provided instructors with the ability to configure assignment grading options so that assignment submissions could be automatically and instantly graded with feedback when learners submitted work\n- **Engagement tracking**: Instructors can view learner engagement to provide additional support to those who may need it. Engagement scores are used to guide instructors so they can maximize the engagement of their courses\n- **Knowledge base**: Each learner has the ability to create their own (or link to other) knowledge bases - enabling knowledge sharing and knowledge consolidation\n- Attendance monitoring: Allows instructors to gauge attendance in relation to content delivery\n- **Automatic assignments publication**: Instructors could opt-in to automatic assignments so take-away tasks could be scheduled, created, and shared between instructors for their learners.\n- **Github integration**: Lets learners link to GitHub to manage their assignment submissions, while learning the basics of git\n \nAll in all, this platform has grown with ProjectFunction to meet its growing demands. It's been an amazing experience to build and maintain, but as with all good things, it is now time to put it to rest. \n\n\n { \n \"/images/spotlight/campus/campus_login_page.png\": \"Campus login page\", \n \"/images/spotlight/campus/campus_dashboard.png\": \"Dashboard showing articles from dev.to\", \n \"/images/spotlight/campus/campus_assignments.png\": \"Assigment page showing a list of outstanding tasks\", \n \"/images/spotlight/campus/campus_assignment_detail.png\": \"Assignment detail page\", \n \"/images/spotlight/campus/campus_submissions.png\": \"User assignment submission page\", \n \"/images/spotlight/campus/campus_submission_detail.png\": \"Submission detail page showing automatic testing results\", \n \"/images/spotlight/campus/fizzbuzz_assignment.png\": \"Sample assignment: Fizzbuzz\", \n \"/images/spotlight/campus/create_from_template.png\": \"Github 6showing flow from Campus for learner to create repo\", \n \"/images/spotlight/campus/user_account.png\": \"User account showing engagement rating and attendance\", \n \"/images/spotlight/campus/manage_permissions.png\": \"In dark mode: Admin page showing permission settings\",\n \"/images/spotlight/campus/campus_lesson.png\": \"Lesson page allows user to recap the sessions they attend\",\n \"/images/spotlight/campus/lesson_resources.png\": \"Any resources used throughout the lesson are available on lesson pages\",\n \"/images/spotlight/campus/campus_quick_jump.png\": \"Learners can use quick jump to access lessons, resources, and more\"\n }\n\n\nI've personally learned a lot along the way, and there are many lessons to take away from the experiences ive gained by building and scaling this platform. Im excited to see where this knowledge takes me 🚀","renderedContent":"\n This LMS was created for ProjectFunction, which closed its doors in May 2022. See an archive of it on the project page.\n\n

For those of you who have not been keeping up with my adventures lately, Rizwana and I ended a PF session for the last time in May after the successful completion of wave 9. Since then, I have gone for a well-needed holiday, replacing my mental and emotional burns with physical ones.

Despite existing and providing a digital learning experience for the past 3 years, Campus has never been seen outside of ProjectFunction. So I thought id take a moment to spotlight Campus - the LMS that I have been working on and maintaining for PF for a couple of years.

\n $\"Campus$ \n

Since the inception of v0.1, Campus has had 3 major updates; bringing about a new look, scalable infrastructure, and user-segmented data storage. These changes allowed Campus to grow with PF, as demand and userbase grew.

By the final version of Campus, we were able to bring about the following features which helped improve the experience for individual instructors, as well as learners:

Knowledge tracking: Allows instructors to review cohort progress and adjust content delivery methods to optimize learning
Lesson recaps: Learners were able to review any previous lessons and access the relevant assignments, worksheets, and cheatsheets
Automatic feedback: Provided instructors with the ability to configure assignment grading options so that assignment submissions could be automatically and instantly graded with feedback when learners submitted work
Engagement tracking: Instructors can view learner engagement to provide additional support to those who may need it. Engagement scores are used to guide instructors so they can maximize the engagement of their courses
Knowledge base: Each learner has the ability to create their own (or link to other) knowledge bases - enabling knowledge sharing and knowledge consolidation
Attendance monitoring: Allows instructors to gauge attendance in relation to content delivery
Automatic assignments publication: Instructors could opt-in to automatic assignments so take-away tasks could be scheduled, created, and shared between instructors for their learners.
Github integration: Lets learners link to GitHub to manage their assignment submissions, while learning the basics of git

All in all, this platform has grown with ProjectFunction to meet its growing demands. It’s been an amazing experience to build and maintain, but as with all good things, it is now time to put it to rest.

\n\n { \n \"/images/spotlight/campus/campus_login_page.png\": \"Campus login page\", \n \"/images/spotlight/campus/campus_dashboard.png\": \"Dashboard showing articles from dev.to\", \n \"/images/spotlight/campus/campus_assignments.png\": \"Assigment page showing a list of outstanding tasks\", \n \"/images/spotlight/campus/campus_assignment_detail.png\": \"Assignment detail page\", \n \"/images/spotlight/campus/campus_submissions.png\": \"User assignment submission page\", \n \"/images/spotlight/campus/campus_submission_detail.png\": \"Submission detail page showing automatic testing results\", \n \"/images/spotlight/campus/fizzbuzz_assignment.png\": \"Sample assignment: Fizzbuzz\", \n \"/images/spotlight/campus/create_from_template.png\": \"Github 6showing flow from Campus for learner to create repo\", \n \"/images/spotlight/campus/user_account.png\": \"User account showing engagement rating and attendance\", \n \"/images/spotlight/campus/manage_permissions.png\": \"In dark mode: Admin page showing permission settings\",\n \"/images/spotlight/campus/campus_lesson.png\": \"Lesson page allows user to recap the sessions they attend\",\n \"/images/spotlight/campus/lesson_resources.png\": \"Any resources used throughout the lesson are available on lesson pages\",\n \"/images/spotlight/campus/campus_quick_jump.png\": \"Learners can use quick jump to access lessons, resources, and more\"\n }\n\n

I’ve personally learned a lot along the way, and there are many lessons to take away from the experiences ive gained by building and scaling this platform. Im excited to see where this knowledge takes me 🚀

\n","readTime":"3 minutes"},{"slug":"moving-out-notts","title":"Moving out","date":"2022-07-03","lastUpdated":"2022-07-10","image":"https://darylcecile.net/r/images.unsplash.com/photo-1620056302463-3463f640c48e?ixlib=rb-1.2.1&dl=samuel-regan-asante-JWPHPoohPhk-unsplash.jpg&q=80&auto=format&fit=crop&crop=bottom&h=680&w=1280","content":"\n\nThis post has been a long time in the making. I've been scratching my head, wondering how to announce this\nmajor milestone in my life. When writing notes for my website, I often like to form a story to help me get my thought process across; \nbut the thing is, this doesn't need a story because it is already a story on its own. And after many unsuccessful attempts at starting this\npost, I'll cut straight to the chase; I'm moving back to London.\n\nThis decision had been settled for a while now, and when I first announced it to my closest, everyone was somewhat shocked but supportive. After\nspending 6+ years in Nottingham, I feel like it is finally time to move on and move out. I've made so many memories along the way, met so many\namazing people, forged new connections, made life-long friends, shared some amazing experiences \n(see [PF](https://projectfunction.io/notes/this-isnt-farewell)), and was welcomed into great communities like the \n[NTU Pride Society](https://twitter.com/NTUPrideSociety), and [Tech Nottingham](https://twitter.com/technottingham). These are the ones I will\ncherish forever; they have helped me discover who I am, and have helped shape who I want to be and what I want to achieve. 💕\n\n![Pride Soc Group Pic on the Left, ProjectFunction Group Pic on the right](/images/nottingham-memory.jpeg)\n\nAs some of you may know, I moved to Nottingham a little over 6 years ago for University; I did a Bachelor's degree in Computer Science. Since then\nI made great new friends, co-founded an amazing community-driven company called ProjectFunction, and\nmade Nottingham my home. After leaving NTU, I went straight into work, working for a clinical trial company,\nthen a local web agency before moving to my current Job as a Software Development Engineer at CapitalOne. I've learned a lot along the way but\neventually started wondering whether there was more to it. As much as I love Notts, I ended up outgrowing it. Covid didn't help; a lot of the places I\nenjoyed frequenting have either closed down (looking at \nyou [Propaganda](https://www.nottinghampost.com/whats-on/music-nightlife/end-era-nottingham-nightclub-closes-4140415)), or changed \n[beyond recognition](https://newforestersnottingham.co.uk/). I needed space to stretch. London was the ideal next candidate having grown up there and\nhaving family based there. I just needed one more reason to make the life-changing move.\n\nLast week, my partner started a new job in London; this was the perfect opportunity to make the move - and so the wheels were put in motion. I spoke\nto work and got the green light to transfer to their london office, and then announced to my closest and dearest friends and family. I don't know what\nawaits, but I can truly say that I am ready for the next chapter of this adventure, and I'm excited to share my learnings and experiences in London.\nThis isn't the last Notts will see of me; I will return to visit regularly. 🫶🏽","renderedContent":"

This post has been a long time in the making. I’ve been scratching my head, wondering how to announce this
\nmajor milestone in my life. When writing notes for my website, I often like to form a story to help me get my thought process across;
\nbut the thing is, this doesn’t need a story because it is already a story on its own. And after many unsuccessful attempts at starting this
\npost, I’ll cut straight to the chase; I’m moving back to London.

This decision had been settled for a while now, and when I first announced it to my closest, everyone was somewhat shocked but supportive. After
\nspending 6+ years in Nottingham, I feel like it is finally time to move on and move out. I’ve made so many memories along the way, met so many
\namazing people, forged new connections, made life-long friends, shared some amazing experiences
\n(see PF), and was welcomed into great communities like the
\nNTU Pride Society, and Tech Nottingham. These are the ones I will
\ncherish forever; they have helped me discover who I am, and have helped shape who I want to be and what I want to achieve. 💕

$\"Pride$

As some of you may know, I moved to Nottingham a little over 6 years ago for University; I did a Bachelor’s degree in Computer Science. Since then
\nI made great new friends, co-founded an amazing community-driven company called ProjectFunction, and
\nmade Nottingham my home. After leaving NTU, I went straight into work, working for a clinical trial company,
\nthen a local web agency before moving to my current Job as a Software Development Engineer at CapitalOne. I’ve learned a lot along the way but
\neventually started wondering whether there was more to it. As much as I love Notts, I ended up outgrowing it. Covid didn’t help; a lot of the places I
\nenjoyed frequenting have either closed down (looking at
\nyou Propaganda), or changed
\nbeyond recognition. I needed space to stretch. London was the ideal next candidate having grown up there and
\nhaving family based there. I just needed one more reason to make the life-changing move.

Last week, my partner started a new job in London; this was the perfect opportunity to make the move - and so the wheels were put in motion. I spoke
\nto work and got the green light to transfer to their london office, and then announced to my closest and dearest friends and family. I don’t know what
\nawaits, but I can truly say that I am ready for the next chapter of this adventure, and I’m excited to share my learnings and experiences in London.
\nThis isn’t the last Notts will see of me; I will return to visit regularly. 🫶🏽

\n","readTime":"2 minutes"},{"slug":"burning-bright-without-burning-out","title":"Burning bright without burning out","date":"2022-06-12","image":"https://darylcecile.net/r/images.unsplash.com/photo-1468245856972-a0333f3f8293?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGZvcmVzdCUyMGJ1cm58ZW58MHx8MHx8&auto=format&fit=crop&w=1024&q=60","content":"\n\n\nOpinion: This post is based mostly on my opinion, and experiences that I have gained and/or that have been shared with me. I\nam not a mental health specialist. \nThe main purpose of this post is to share how I approach burnout, and the mental model that has helped me to \nbetter understand how it affects me, in the hope that it may help others.\n\n\nOne of the biggest epidemic in software engineering at the moment, is burnout; \nA word that has almost become synonymous with working in tech over the past couple of years. According \nto the WHO definition,\nan individual suffering from burnout is known to experience feelings of exhaustion, mental numbness, demotivation, and cynicism — often \nin relation to hobbies or occupation.\n\nAs both a software engineer, and a tech mentor, I have seen both sides of this in action; Many people (including myself) aren't able to\nrecognise the slippery slope that leads to burnout straight away, and when they do it's often too late. This sort of behaviour seems to stem\nfrom a lack of understanding of how burnout takes place, as well as a lack of self-reflection; often forgetting that we need to check in on \nourselves. This is not to say that we lack the ability to take care of ourselves — we do! It's just that sometimes, after a full session of\nworking, we have no mental capacity left for ourselves.\n\n![Car accelerometer at 0. Photo by Chris Liverani on Unsplash](https://images.unsplash.com/photo-1517026575980-3e1e2dedeab4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1098&q=80)\n\nWhen I first started in the industry, I was a buzzing young developer who wanted to do many things all at once; so many ideas to explore, \nconcepts to learn, and tools to make. On numerous occasions, I would find myself attending conferences, signing up to events, starting (but\nrarely finishing) side-projects, and refreshing twitter — all while managing studies and work. I barely had time left to afford myself the \nluxury of self-reflexion and checking in on my mental well-being. And whenever id feel exhausted from the constant juggling id just brush it\noff as _'it's **just** been a long day'_, and id go to bed to \"recover\". Little did I know at the time that this was the start of my \noccupational burnout.\n\nUnderstanding burnout and how it affects you as an individual is important in figuring out the steps you need to take to properly recover from \nit. It is also important to be mindful that some steps may not be as easy or straightforward for everyone; The quickest route\nmay rely on some level of privilege that not everyone can afford.\n\n### Burnout expressions\n\nThrough conversations with colleagues, friends, and mentees, I've put together a mental model that represents how _I_ experience burnout, and\nthe common expressions of burnout shared by others who have also experienced it. You may find that your experiences of burnout are not the \nsame and therefore not reflected in this model, but use this as an idea to form your own model to better understand how you experience \nburnout. Who knows, the model may help you discover new ways to approach managing your burnout rate. \n\nIn order to better understand this mental model, we need to establish the foundation.\n\n##### 1. Burnout rate increases exponentially\n\nIt is important to note that burnout is not binary; Like most things it's a scale. Signs of burnout may appear\nquite early before it becomes burdensome and causes your productivity to tank. It is only when you ignore these signs and continue to pile\non the triggers that the affects accumulate exponentially. \n\nI personally believe that people don't run out of energy; instead, energy gets\nredirected and used to deal with the effects of burnout, leaving a little less each time for focusing on the task at hand. We often\nspend so much of our capacity on workarounds for the symptoms of burnout that we have less capacity for the stuff that matters and tasks that\nwe actually want to do or makes use feel better.\n\n##### 2. It's easier to burnout than to re-ignite\n\nThe more burnt-out you get, the harder and longer it takes to recover. Burning out is a slippery slope which many of us tend to blindly fall victim\nto.\n\nCommon tasks that contribute to burnout tend to be ones founded in habit; and so many people including myself, may struggle to break away from\nthose habits to allow for recovery to take place — further complicating the recovery process. For example, I love keeping tabs on how the web\nis changing, so I often find myself doom-scrolling twitter, reddit, or hackernews for any piece of new tech-related news I can find; this habit\nsometimes even extends to when I go on holiday — any idle time I could use \nto [take a breather](https://www.helpguide.org/meditations/mindful-breathing-meditation.htm) ends up being spent on these platforms.\n\n##### 3. Physical and mental stress work hand in hand, but they are not the same\n\nA common phrase that often pops up when working with colleagues and people I mentor is _'I shouldn't feel this tired, I've barely done anything today'_.\nAnd admittedly, I'm culprit of this too. It's easy to forget that physical and mental pressures are not the same despite the fact that they\nwork hand in hand. Being mentally exhausted is not the same as being physically exhausted, and often people experience one without experiencing the\nother; so it's important to keep an eye out for this as it is one of the signals of burnout. Being able to detect this and changing your routine\nwill help decrease the burnout rate.\n\n![Mist spreading throughout a forest. Photo by Hans Isaacson on Unsplash](https://images.unsplash.com/photo-1654805540365-f5f7c81dfadf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMnx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&h=680&q=90)\n\n### Visualizing the burnout process\n\nPicture this: Your mind is a forest, and the trees represent our ideas, energy, and motivation. When we focus intensively on specific tasks, the forest \ngets misty, preventing us from focusing on other things. In order for the trees to grow and thrive, we need to occasionally see to it and water it,\nand nurture it. But when we are too occupied and stressed trying to meet deadlines, we forget to look after it and the trees disappears. Everytime a tree \ndisappears, the landscape of our forest changes. \n\nChanges to the landscape of our forest makes us less productive as more time is spent remapping our forest and finding our way through it. This constant\nremapping also tires us out. As a response to this, we start to limit our how we spend energy and stop checking the outer perimeters of our forest; causing\nthose trees to disappear.\n\n\n\tWIP!\n\n\n### Can we recover from Burnout?\n\nTrees grow, but they take time. And like most wounds, they heal. This is a process that can't be rushed, and depending on how far they've pushed it, it may\ntake longer for some to recover than others. But if there is something we can all do straight away, it's to watch out for the signs and make sure we take a \nstep back every now and then to evaluate how we are feeling, and where we are on our burnout scale. Seeding and growing a couple of trees is far less work \nthan re-growing an entire forest. 🌱","renderedContent":"\nOpinion: This post is based mostly on my opinion, and experiences that I have gained and/or that have been shared with me. I\nam not a mental health specialist. \nThe main purpose of this post is to share how I approach burnout, and the mental model that has helped me to \nbetter understand how it affects me, in the hope that it may help others.\n\n

One of the biggest epidemic in software engineering at the moment, is burnout;
\nA word that has almost become synonymous with working in tech over the past couple of years. According
\nto the WHO definition,
\nan individual suffering from burnout is known to experience feelings of exhaustion, mental numbness, demotivation, and cynicism — often
\nin relation to hobbies or occupation.

As both a software engineer, and a tech mentor, I have seen both sides of this in action; Many people (including myself) aren’t able to
\nrecognise the slippery slope that leads to burnout straight away, and when they do it’s often too late. This sort of behaviour seems to stem
\nfrom a lack of understanding of how burnout takes place, as well as a lack of self-reflection; often forgetting that we need to check in on
\nourselves. This is not to say that we lack the ability to take care of ourselves — we do! It’s just that sometimes, after a full session of
\nworking, we have no mental capacity left for ourselves.

$\"Car$

When I first started in the industry, I was a buzzing young developer who wanted to do many things all at once; so many ideas to explore,
\nconcepts to learn, and tools to make. On numerous occasions, I would find myself attending conferences, signing up to events, starting (but
\nrarely finishing) side-projects, and refreshing twitter — all while managing studies and work. I barely had time left to afford myself the
\nluxury of self-reflexion and checking in on my mental well-being. And whenever id feel exhausted from the constant juggling id just brush it
\noff as ‘it’s just been a long day’, and id go to bed to “recover”. Little did I know at the time that this was the start of my
\noccupational burnout.

Understanding burnout and how it affects you as an individual is important in figuring out the steps you need to take to properly recover from
\nit. It is also important to be mindful that some steps may not be as easy or straightforward for everyone; The quickest route
\nmay rely on some level of privilege that not everyone can afford.

Burnout expressions

Through conversations with colleagues, friends, and mentees, I’ve put together a mental model that represents how I experience burnout, and
\nthe common expressions of burnout shared by others who have also experienced it. You may find that your experiences of burnout are not the
\nsame and therefore not reflected in this model, but use this as an idea to form your own model to better understand how you experience
\nburnout. Who knows, the model may help you discover new ways to approach managing your burnout rate.

In order to better understand this mental model, we need to establish the foundation.

1. Burnout rate increases exponentially

It is important to note that burnout is not binary; Like most things it’s a scale. Signs of burnout may appear
\nquite early before it becomes burdensome and causes your productivity to tank. It is only when you ignore these signs and continue to pile
\non the triggers that the affects accumulate exponentially.

I personally believe that people don’t run out of energy; instead, energy gets
\nredirected and used to deal with the effects of burnout, leaving a little less each time for focusing on the task at hand. We often
\nspend so much of our capacity on workarounds for the symptoms of burnout that we have less capacity for the stuff that matters and tasks that
\nwe actually want to do or makes use feel better.

2. It’s easier to burnout than to re-ignite

The more burnt-out you get, the harder and longer it takes to recover. Burning out is a slippery slope which many of us tend to blindly fall victim
\nto.

Common tasks that contribute to burnout tend to be ones founded in habit; and so many people including myself, may struggle to break away from
\nthose habits to allow for recovery to take place — further complicating the recovery process. For example, I love keeping tabs on how the web
\nis changing, so I often find myself doom-scrolling twitter, reddit, or hackernews for any piece of new tech-related news I can find; this habit
\nsometimes even extends to when I go on holiday — any idle time I could use
\nto take a breather ends up being spent on these platforms.

3. Physical and mental stress work hand in hand, but they are not the same

A common phrase that often pops up when working with colleagues and people I mentor is ‘I shouldn’t feel this tired, I’ve barely done anything today’.
\nAnd admittedly, I’m culprit of this too. It’s easy to forget that physical and mental pressures are not the same despite the fact that they
\nwork hand in hand. Being mentally exhausted is not the same as being physically exhausted, and often people experience one without experiencing the
\nother; so it’s important to keep an eye out for this as it is one of the signals of burnout. Being able to detect this and changing your routine
\nwill help decrease the burnout rate.

$\"Mist$

Visualizing the burnout process

Picture this: Your mind is a forest, and the trees represent our ideas, energy, and motivation. When we focus intensively on specific tasks, the forest
\ngets misty, preventing us from focusing on other things. In order for the trees to grow and thrive, we need to occasionally see to it and water it,
\nand nurture it. But when we are too occupied and stressed trying to meet deadlines, we forget to look after it and the trees disappears. Everytime a tree
\ndisappears, the landscape of our forest changes.

Changes to the landscape of our forest makes us less productive as more time is spent remapping our forest and finding our way through it. This constant
\nremapping also tires us out. As a response to this, we start to limit our how we spend energy and stop checking the outer perimeters of our forest; causing
\nthose trees to disappear.

\n\n\tWIP!\n\n

Can we recover from Burnout?

Trees grow, but they take time. And like most wounds, they heal. This is a process that can’t be rushed, and depending on how far they’ve pushed it, it may
\ntake longer for some to recover than others. But if there is something we can all do straight away, it’s to watch out for the signs and make sure we take a
\nstep back every now and then to evaluate how we are feeling, and where we are on our burnout scale. Seeding and growing a couple of trees is far less work
\nthan re-growing an entire forest. 🌱

\n","readTime":"6 minutes"},{"slug":"rss-autodiscovery","title":"Adding RSS Autodiscovery to your site","date":"2022-06-05","content":"\n\nRecently, I've discovered a new-found love for RSS. It gives\nme the best of both worlds; fast access to content, and a way to subscribe to content from sites I frequently visit - without \nhaving to share my email address. Coincidentally, over the Jubilee weekend, I've been updating my website; adding dark mode,\nwriting new content, and even adding an RSS feed. So I thought id write a mini tutorial guide on adding autodiscovery to a website.\n\n### Getting started\n\nFirstly, put together an RSS feed. Most frameworks have their own way of implementing this. For my website, I had to do this \nmanually by writing a small pre-build script that utilizes the [Feed NPM Package](https://www.npmjs.com/package/feed) to create \nthe xml, atom, and json feeds. Once you have a feed and a way to access it (i.e. the link where the feed is hosted), you can \ngo ahead with autodiscovery.\n\nAdding auto-discovery is as easy as adding the following snippet into the `` tag of your page:\n\n```html\n\n```\n\nMake sure to update the `href` and `title` attributes to match your website content!\n\nIf you are using an ATOM feed, you will need to change the `type` attribute value to `application/atom+xml`. This will tell the\nfeed crawlers that come across your site how to handle the feed you provide.\n\nAfter enabling autodiscovery, browsers and feed aggregators will be able to automatically detect that your website has a feed, making\nit easier for visitors to subscribe to it. My _current_ feed aggregator of choice is currently [feeder](https://feeder.co); It automatically\ndetects RSS, ATOM, and JSON feeds on pages that I visit, and allows me to subscribe to it with two clicks.","renderedContent":"

Recently, I’ve discovered a new-found love for RSS. It gives
\nme the best of both worlds; fast access to content, and a way to subscribe to content from sites I frequently visit - without
\nhaving to share my email address. Coincidentally, over the Jubilee weekend, I’ve been updating my website; adding dark mode,
\nwriting new content, and even adding an RSS feed. So I thought id write a mini tutorial guide on adding autodiscovery to a website.

Getting started

Firstly, put together an RSS feed. Most frameworks have their own way of implementing this. For my website, I had to do this
\nmanually by writing a small pre-build script that utilizes the Feed NPM Package to create
\nthe xml, atom, and json feeds. Once you have a feed and a way to access it (i.e. the link where the feed is hosted), you can
\ngo ahead with autodiscovery.

Adding auto-discovery is as easy as adding the following snippet into the <head> tag of your page:

<link rel="alternate" \n      type="application/rss+xml" \n      title="RSS Feed for darylcecile.net" \n      href="/rss.xml" />\n

Make sure to update the href and title attributes to match your website content!

If you are using an ATOM feed, you will need to change the type attribute value to application/atom+xml. This will tell the
\nfeed crawlers that come across your site how to handle the feed you provide.

After enabling autodiscovery, browsers and feed aggregators will be able to automatically detect that your website has a feed, making
\nit easier for visitors to subscribe to it. My current feed aggregator of choice is currently feeder; It automatically
\ndetects RSS, ATOM, and JSON feeds on pages that I visit, and allows me to subscribe to it with two clicks.

\n","readTime":"1 minute read"},{"slug":"excom-chrome-extension","title":"Exploring the Chrome Extension context gaps","date":"2022-06-04","content":"\n\nA couple of weeks ago, a conversation at work with my manager prompted me to revisit an old chrome extension I created a while\nback to help me manage my tab usage better.\n\nThe extension was born out of frustration for tab management; I was simply out of control.\nA simple workday could easily land me with 50+ tabs. So I created an extension called [Alfred](https://chrome.google.com/webstore/detail/alfred/mjlmoifgncbednjccpnhcjeifpfnjeon)\nthat would automatically close tabs that I hadn't used in a while. The experience was not something I enjoyed... or wanted to repeat. So I pushed that side-project aside like a typical developer\nand avoided going back to it.\n\nFast-forward to the conversation with my manager, I realised it was time to give Chrome extension development another shot. This time,\nI had another motive; I wanted to prove that developing a Chrome extension using [React](https://reactjs.org/), \n[TypeScript](https://typescriptlang.org/), and [esbuild](https://esbuild.github.io/) could make the development\nprocess enjoyable.\n\nSo I set off creating a folder to house my project, and `yarn add`-ed esbuild, typescript, and react. I had a rough idea\nof what I wanted; react for the content script (to inject into the page), and esbuild to transpile and bundle my .tsx into .js that\nChrome could consume directly. I started to plan down what I would make my extension do, and remembered why I didn't enjoy developing\nextensions - runtime realms. \n\nChrome's extension [runtime](https://developer.chrome.com/docs/extensions/mv3/architecture-overview/#arch) is essentially \nsplit into three 'realms' (I'm not sure if this is the correct name for it, but this is my post, so I'll call it that going \nforward); the content script, the background script, and the popup. (I know chrome also allows for new tab pages and the like, \nbut from my _limited_ experience these act more or less like popups). Due to the sandboxing\nnature and the way the extension-land is set up, most cross-realm communication need to take place \nvia [message passing](https://developer.chrome.com/docs/extensions/mv3/messaging/). So one realm needs to send, and \nthe receiving end needs to have a listener set up to respond to the messages. This is all fine and understandable, but when you look deeper\nit becomes clear that the three realms don't behave the same way and don't have the same lifecycle steps. Now this is what annoyed me, \nbecause as the developer, I had to manage not only the communication between the realms, but the fact that they are all in their own separate\ncontexts. Surely there was something I could do to bridge this gap and abstract it behind an api that would handle that for me?\n\n![Extensions Architecture as seen on developer.chrome.com](/images/chrome-extension-architecture.png)\n\nI started by thinking of a simple (probably useless) scenario. I'd have the content-script injecting a React component with a simple\ncounter state. Then I should be able to update the state from the extension popup by calling the same function as the content-script - \nall without having to think about messaging and listeners. And to be extra spicy, be able to trigger a 'open new tab' function that lives\nin the background-script, from both the content-script and the popup.\n\nFirst thing was to create a class that would handle the communication itself between realm boundaries, making sure to handle function calls\nfrom different realms first. I didn't want to make every function in a realm accessible to other realms, so I added a `registerInterfaces(...)`\nmethod that would allow you to expose specific functions to other realms. This would then become accessible on that realm's script instance.\nAfter this I had to make sure that the incoming-messages listeners where set up, so I moved that to a `tap()` method that should be called\nto set up the listeners. This was mostly done to satisfy my future react-related use-case where I'd need to be able to `untap()` to clean up\nin `useEffect(...)` calls.\n\nAfter some playing about and end-to-end user-testing, I ended up with something that completed my initial plan, so \nI [published](https://www.npmjs.com/package/@projectfunction/excom). Now I can have a handler in any realm, and easily \nsend messages and call exposed functions in other realms without having to think too hard about messaging and checking each message. \nInstead, I can do this:\n\n```typescript\n// In my background.ts\nimport {backgroundScriptHandler} from \"@projectfunction/excom\";\n\nbackgroundScriptHandler.tap();\n\nbackgroundScriptHandler.registerInterfaces({\n\topenTab: async function(url){\n\t\tlet tab = await chrome.tabs.create({ url, active: false });\n\t\tconsole.log(`opened tab with id ${tab.id}, from background script`);\n\t\treturn 25;\n\t}\n});\n```\n\nand then in my content-script or popup, I can do:\n\n```typescript\nimport {popupScriptHandler} from \"@projectfunction/excom\";\n\npopupScriptHandler.tap(); //somewhere at the start so it runs once\n\nconst returnValue = await popupScriptHandler.backgroundMethods.openTab('https://youtube.com');\n\n// returnValue is 25\n```\n\nOnce this was made and published^{[[1]](#reference1)}, I decided to create a dummy extension\nthat allows me to search through my open tabs through a search box that is injected on any page I'm on, with the background script\nhandling the actual search and filtering. The experience was so much nicer; I could focus purely on calling methods and UI, and the library\ndid the rest.\n\nWho knows where this may lead me? Maybe I'll become a full-time extensions developer 😏\n\n--\n\nP.S. I am aware there may be other ways to tackle this and that this potentially has flaws that I am too tired to look into, but this\nlittle exploration was worth it - and if anything, it was just the push I needed to get into extensions.\n\n---\n\n^[1] [Excom Repository](https://github.com/daryl-cecile/excom)","renderedContent":"

A couple of weeks ago, a conversation at work with my manager prompted me to revisit an old chrome extension I created a while
\nback to help me manage my tab usage better.

The extension was born out of frustration for tab management; I was simply out of control.
\nA simple workday could easily land me with 50+ tabs. So I created an extension called Alfred
\nthat would automatically close tabs that I hadn’t used in a while. The experience was not something I enjoyed… or wanted to repeat. So I pushed that side-project aside like a typical developer
\nand avoided going back to it.

Fast-forward to the conversation with my manager, I realised it was time to give Chrome extension development another shot. This time,
\nI had another motive; I wanted to prove that developing a Chrome extension using React,
\nTypeScript, and esbuild could make the development
\nprocess enjoyable.

So I set off creating a folder to house my project, and yarn add-ed esbuild, typescript, and react. I had a rough idea
\nof what I wanted; react for the content script (to inject into the page), and esbuild to transpile and bundle my .tsx into .js that
\nChrome could consume directly. I started to plan down what I would make my extension do, and remembered why I didn’t enjoy developing
\nextensions - runtime realms.

Chrome’s extension runtime is essentially
\nsplit into three ‘realms’ (I’m not sure if this is the correct name for it, but this is my post, so I’ll call it that going
\nforward); the content script, the background script, and the popup. (I know chrome also allows for new tab pages and the like,
\nbut from my limited experience these act more or less like popups). Due to the sandboxing
\nnature and the way the extension-land is set up, most cross-realm communication need to take place
\nvia message passing. So one realm needs to send, and
\nthe receiving end needs to have a listener set up to respond to the messages. This is all fine and understandable, but when you look deeper
\nit becomes clear that the three realms don’t behave the same way and don’t have the same lifecycle steps. Now this is what annoyed me,
\nbecause as the developer, I had to manage not only the communication between the realms, but the fact that they are all in their own separate
\ncontexts. Surely there was something I could do to bridge this gap and abstract it behind an api that would handle that for me?

$\"Extensions$

I started by thinking of a simple (probably useless) scenario. I’d have the content-script injecting a React component with a simple
\ncounter state. Then I should be able to update the state from the extension popup by calling the same function as the content-script -
\nall without having to think about messaging and listeners. And to be extra spicy, be able to trigger a ‘open new tab’ function that lives
\nin the background-script, from both the content-script and the popup.

First thing was to create a class that would handle the communication itself between realm boundaries, making sure to handle function calls
\nfrom different realms first. I didn’t want to make every function in a realm accessible to other realms, so I added a registerInterfaces(...)
\nmethod that would allow you to expose specific functions to other realms. This would then become accessible on that realm’s script instance.
\nAfter this I had to make sure that the incoming-messages listeners where set up, so I moved that to a tap() method that should be called
\nto set up the listeners. This was mostly done to satisfy my future react-related use-case where I’d need to be able to untap() to clean up
\nin useEffect(...) calls.

After some playing about and end-to-end user-testing, I ended up with something that completed my initial plan, so
\nI published. Now I can have a handler in any realm, and easily
\nsend messages and call exposed functions in other realms without having to think too hard about messaging and checking each message.
\nInstead, I can do this:

// In my background.ts\nimport {backgroundScriptHandler} from "@projectfunction/excom";\n\nbackgroundScriptHandler.tap();\n\nbackgroundScriptHandler.registerInterfaces({\n\topenTab: async function(url){\n\t\tlet tab = await chrome.tabs.create({ url, active: false });\n\t\tconsole.log(`opened tab with id ${tab.id}, from background script`);\n\t\treturn 25;\n\t}\n});\n

and then in my content-script or popup, I can do:

import {popupScriptHandler} from "@projectfunction/excom";\n\npopupScriptHandler.tap(); //somewhere at the start so it runs once\n\nconst returnValue = await popupScriptHandler.backgroundMethods.openTab('https://youtube.com');\n\n// returnValue is 25\n

Once this was made and published^[1], I decided to create a dummy extension
\nthat allows me to search through my open tabs through a search box that is injected on any page I’m on, with the background script
\nhandling the actual search and filtering. The experience was so much nicer; I could focus purely on calling methods and UI, and the library
\ndid the rest.

Who knows where this may lead me? Maybe I’ll become a full-time extensions developer 😏

–

P.S. I am aware there may be other ways to tackle this and that this potentially has flaws that I am too tired to look into, but this
\nlittle exploration was worth it - and if anything, it was just the push I needed to get into extensions.

^[1] Excom Repository

\n","readTime":"4 minutes"},{"slug":"vercel-doc-journey","title":"Doc Journey: ▲Vercel Edition","date":"2022-02-16","lastUpdated":"2022-03-01","content":"\n\n\nDisclaimer: While this post outlines some of the issues I've had with the Vercel documentation, it in no way discredits the amazing work the Vercel Team have been doing. Documentation in this industry needs work as a whole, and for the most part, Vercel's documentation has helped me out countless times. This post is intended to note my discoveries, thought-processes, and eventual solution to the issues I came across, as I journey through the documentation. The outcome of this basic-level research will be published and open-sourced.\n\n\n\nUpdate: Last Thursday (24th Feb), I had the opportunity to chat to [Meg](https://twitter.com/itsmegbird) from Vercel about my experience and journey with the API docs. I have [extended](#update-improvement-suggestion) this note to include my take on how it could be improved.\n\n\n---\n\nLast week [Rizwana](https://twitter.com/rizbizkits) discovered a cute little [Co-working space](https://www.cobdenplace.co.uk/) in Nottingham. We had been on the lookout for a place where we could carry out some work for PF^{[[1]](#reference1)}, as well as potentially run some of our upcoming courses. At the time, I was making some upgrades to [PF Campus](https://projectfunction.io/how-we-teach), trying to enable deployments for students to be able to deploy their work to a portfolio as part of their submission process. With previous versions of Campus being on a dedicated server, we offered learners with the option to privately deploy (onto our infrastructure) or publicly via Netlify; however, now that it has moved onto a serverless model, it was time to revisit the options.\n\n![Campus v1 Deployment to Netlify](/images/campus-deploy1.png)\n\nAs the great advocate that she is, she asked if there was a reason we weren't deploying on Vercel. After all, Campus v2 was already deployed on there, so it only made sense.\n\nEarly on in 2021, I had the exact same thought. However, after doing a deep dive, I realised that there was no available packages at the time that interfaced well with Vercel to allow us to programmatically manage projects and deployments the way we needed. And upon further venturing, I came to accept that (a) the available REST APIs was in too much of an early stage, and (b) developing a wrapper around it would be more work than I was able to put in given my day-to-day schedules, and the state of Vercel Documentation back then. In fact the latter was the exact reason that initially pushed me to use Netlify to deploy.\n\nNow before anyone jumps onto the \"but Daryl, they provide a CLI\" - I know! But it was not convenient and using it programmatically in our setup felt like a hack (we weren't using a command-line interface). So it was best to avoid it. 🤷🏽‍♂️\n\nAfter a nudge to give the APIs a second consideration, I thought '*Well surely the REST APIs would have matured a little by now*', and it did ...kind of. While the APIs looked a lot more stable with [different versions](https://vercel.com/docs/rest-api#introduction/api-basics/versioning) to avoid breaking changes, it still felt a little overwhelming; it felt like a lot of work had to be done on my part to figure out how things work and what the processes were. Some pages had incomplete documentation, while others had incorrect data-types listed for parameters.\n\n### Potential Solution? 🥊\n\nDespite the issues with the doc, I decided to delve into it a bit more. If I could figure out the missing details and expected data for the API endpoints, I could create a wrapper around the API. This became the plan:\n - Set up a project for the wrapper\n - Consolidate the must-have features (based on PF use-case)\n - Work my way through the endpoints and create wrapper functions\n - Write a script that calls each wrapper function, setting up projects and deployments, checking the status, and tearing them down.\n\nI set up a [small project](https://github.com/daryl-cecile/next-controls) locally, and once I had all the dependencies in place to package my Typescript project, the journey through the docs began. Going into it, I only hoped the docs would be enough to fill the gaps; however, after looking through the endpoint documentation, I immediately fell in love with the addition of the `interaface` and `type` definitions (written in TS) for responses! It made the guesswork a little easier; and seeing as I was already using Typescript, it was a case of copy-pasta 🍝.\n\n![Sample response interface for the Aliases Endpoint](/images/vercel-docs-response-interface.png)\n\nSeeing the typescript interface and type definitions brought about a sense of excitement but that feeling was quickly followed by a sense of defeat once I remembered how incomplete the documentation was as a whole. \n\n### Missing Definition\n\nThe first gripe was to do with the [Create new deployment](https://vercel.com/docs/rest-api#endpoints/deployments/create-a-new-deployment) endpoint. It allows you to create deployments using a git source or by attaching files as part of the request. The latter made more sense for our use-case, so I tried to find out what the format and properties should be. Unfortunately, there was no information on this - the little bit of info I found suggested that the `files` property accepted \"a list of objects with the files to be deployed\". What was this file object? I set up a quick function which made the call to the API endpoint, and attempted to pass the files as a simple key-value object:\n\n```typescript jsx\nfunction CreateDeployment({bearer, forceNew, ...body}:CreateDeploymentParams){\n return axios.request({\n method: \"post\",\n url: DEPLOYMENTS_ENDPOINT_V13,\n headers: {\n \"Authorization\": `BEARER ${bearer}`,\n \"Content-Type\": \"application/json\",\n },\n data: {\n name: body.projectId,\n files: body.files,\n target: body.target\n },\n validateStatus: () => true // prevent rejection on failed request\n });\n}\n\nCreateDeployment({\n target: \"staging\",\n projectId: \"prj_Ze66UvH4X9...t\",\n bearer: process.ENV.VERCEL_TOKEN,\n forceNew: true,\n files: [\n {name: \"index.html\", data: \"

Test

\"}\n ]\n}).then(res => {\n\tconsole.log('Result:', res)\n})\n```\n\nAfter giving this a quick run, I received an error `bad_request` with the following message: `Invalid request: 'files[0]' should NOT have additional property 'name'.` This was interesting 🤔 Even though the documentation didnt seem to point out what was needed, the endpoint was doing some type of check to see what properties are expected. Based on the response, it seems `data` is likely expected, but surely there must be a property to specify the file name. After giving 'fileName', and 'filePath' a try (both returning similar errors), I became frustrated and decided to rethink; even if I did manage to guess the name, there is no way data would work without additional formatting - how would I upload image content as a reasonably-lengthened string? \n\nThis realization drove me back to GitHub. Maybe (hopefully?) someone had the same question and found a solution? I searched through all repos including Vercel, but GitHub search really lived up to its bad reputation when it came to code-searching. Luckily they had another tool I could use (currently in beta). Enter [GitHub CodeSearch](https://cs.github.com). \n\n![GitHub CodeSearch Homepage](/images/Github-CodeSearch.png)\n\nI began searching globally on CodeSearch for the Vercel deployment endpoint and in no time, I came across [TeleportHQ's repo](https://github.com/teleporthq/teleport-code-generators) which defined an [interface](https://cs.github.com/teleporthq/teleport-code-generators/blob/9f86b0edd484ae9cf6e93849d7f7d3924ce3daa0/packages/teleport-publisher-vercel/src/types.ts#L10) named `VercelFile`. I was a little annoyed I didn't try `file` as a property, but so relieved that there was a drop-in definition I could use.\n\nAfter dropping in the definition and updating the above code, I gave it another run, and alas the deployment succeeded!\n\n![Successful deployment shown in Vercel](/images/vercel-deploy-result1.png)\n\nOnce this step was cleared, I decided to go back to the documentation and see whether any of the optional query parameters for this endpoint would be of use for PF's use-case; and that's when I came across the second issue.\n\n### Unknown Types\n\nThis issue ended up being less of a blocker as some guesswork closed the gaps and allowed me to move forward, however I thought it was notable enough as in some cases, there were discrepancies between types. \n\nLooking at the deployment endpoint's query param options, I could see some properties were unknown. I checked the documentation's own [Types](https://vercel.com/docs/rest-api#introduction/api-basics/types) section to see if this had some explanation, but it didn't. \n\n![Unknown types in the docs](/images/Unknown-types-deploy.png)\n\nAs ive mentioned before, this was less of an issue and more of an inconvenience as I was able to guess the data types for those parameters. \n\n### Final Notes: PF + ▲ = 💜\n\nAs noted by Vercel, changes that they make to the APIs will be outlined in their changelogs, and it is possible that some outlined issues above could have cropped up there, however, this exploration was purely to build a wrapper around the API for consumption by PF (as I couldn't find a suitable one that already existed).\n\nWhile this post outlines a couple of issues that I have personally come across while navigating the API endpoints that Vercel provides, It does not reflect the quality of their product or support that they provide. I personally^{[[2]](#reference2)} use their platform for numerous projects, and it has served me well; I continue to recommend them to friends and learners at ProjectFunction.\n\nEventually, I was able to wrap a couple of the endpoints that I thought would be useful for PF, and I have to admit, the journey was fun. Moving forward, I can now integrate Vercel into the core of PFCampus to allow learners to deploy their work to showcase their abilities.\n\nThe resulting wrapper can be found on my [GitHub repo](https://github.com/daryl-cecile/next-controls). Feel free to use and contribute!\n\nP.S. Make sure you [follow me](https://twitter.com/@darylcecile) on the bird app for updates ✌🏽\n\n
\n\n---\n### Update: Improvement suggestion\nAs mentioned in my update note, I had a chance to chat to [Meg](https://twitter.com/itsmegbird) last Thursday (24th Feb) about my experience and journey with the API docs. At the end of our talk, Meg asked \"If you could change anything about the docs site, what would it be?\" and it got me thinking. I remembered not long ago, I had a play around with Slack's API and I really loved their [API Tester](https://api.slack.com/methods/admin.analytics.getFile/test) feature (This feature can be seen with Google's [API Explorer](https://developers.google.com/apis-explorer) too). This is what I think Vercel's API docs could use.\n\nIt would help keep the docs somewhat in-date with API changes, as developers would be able to make a test API call with the required parameters within the doc, and see a realtime response; enabling them to see what is expected with the call, and what to expect as a response. By allowing the dev to select an Endpoint version, it puts emphasis on the idea that the endpoints are versioned, and allows users to see how calls and responses differ between versions. In a nutshell, the test API caller becomes the live documentation; Showing instead of telling.\n\n
\n\n---\n\n^[1] [ProjectFunction](https://projectfunction.io)\n\n^[2] This [website](https://darylcecile.net) was created using Next.js","renderedContent":"\nDisclaimer: While this post outlines some of the issues I've had with the Vercel documentation, it in no way discredits the amazing work the Vercel Team have been doing. Documentation in this industry needs work as a whole, and for the most part, Vercel's documentation has helped me out countless times. This post is intended to note my discoveries, thought-processes, and eventual solution to the issues I came across, as I journey through the documentation. The outcome of this basic-level research will be published and open-sourced.\n\n

Update: Last Thursday (24th Feb), I had the opportunity to chat to Meg from Vercel about my experience and journey with the API docs. I have extended this note to include my take on how it could be improved.

Last week Rizwana discovered a cute little Co-working space in Nottingham. We had been on the lookout for a place where we could carry out some work for PF^[1], as well as potentially run some of our upcoming courses. At the time, I was making some upgrades to PF Campus, trying to enable deployments for students to be able to deploy their work to a portfolio as part of their submission process. With previous versions of Campus being on a dedicated server, we offered learners with the option to privately deploy (onto our infrastructure) or publicly via Netlify; however, now that it has moved onto a serverless model, it was time to revisit the options.

$\"Campus$

As the great advocate that she is, she asked if there was a reason we weren’t deploying on Vercel. After all, Campus v2 was already deployed on there, so it only made sense.

Early on in 2021, I had the exact same thought. However, after doing a deep dive, I realised that there was no available packages at the time that interfaced well with Vercel to allow us to programmatically manage projects and deployments the way we needed. And upon further venturing, I came to accept that (a) the available REST APIs was in too much of an early stage, and (b) developing a wrapper around it would be more work than I was able to put in given my day-to-day schedules, and the state of Vercel Documentation back then. In fact the latter was the exact reason that initially pushed me to use Netlify to deploy.

Now before anyone jumps onto the “but Daryl, they provide a CLI” - I know! But it was not convenient and using it programmatically in our setup felt like a hack (we weren’t using a command-line interface). So it was best to avoid it. 🤷🏽‍♂️

After a nudge to give the APIs a second consideration, I thought ‘Well surely the REST APIs would have matured a little by now’, and it did …kind of. While the APIs looked a lot more stable with different versions to avoid breaking changes, it still felt a little overwhelming; it felt like a lot of work had to be done on my part to figure out how things work and what the processes were. Some pages had incomplete documentation, while others had incorrect data-types listed for parameters.

Potential Solution? 🥊

Despite the issues with the doc, I decided to delve into it a bit more. If I could figure out the missing details and expected data for the API endpoints, I could create a wrapper around the API. This became the plan:

Set up a project for the wrapper
Consolidate the must-have features (based on PF use-case)
Work my way through the endpoints and create wrapper functions
Write a script that calls each wrapper function, setting up projects and deployments, checking the status, and tearing them down.

I set up a small project locally, and once I had all the dependencies in place to package my Typescript project, the journey through the docs began. Going into it, I only hoped the docs would be enough to fill the gaps; however, after looking through the endpoint documentation, I immediately fell in love with the addition of the interaface and type definitions (written in TS) for responses! It made the guesswork a little easier; and seeing as I was already using Typescript, it was a case of copy-pasta 🍝.

$\"Sample$

Seeing the typescript interface and type definitions brought about a sense of excitement but that feeling was quickly followed by a sense of defeat once I remembered how incomplete the documentation was as a whole.

Missing Definition

The first gripe was to do with the Create new deployment endpoint. It allows you to create deployments using a git source or by attaching files as part of the request. The latter made more sense for our use-case, so I tried to find out what the format and properties should be. Unfortunately, there was no information on this - the little bit of info I found suggested that the files property accepted “a list of objects with the files to be deployed”. What was this file object? I set up a quick function which made the call to the API endpoint, and attempted to pass the files as a simple key-value object:

function CreateDeployment({bearer, forceNew, ...body}:CreateDeploymentParams){\n    return axios.request<CreateDeploymentResponse>({\n        method: "post",\n        url: DEPLOYMENTS_ENDPOINT_V13,\n        headers: {\n            "Authorization": `BEARER ${bearer}`,\n            "Content-Type": "application/json",\n        },\n        data: {\n            name: body.projectId,\n            files: body.files,\n            target: body.target\n        },\n        validateStatus: () => true // prevent rejection on failed request\n    });\n}\n\nCreateDeployment({\n  target: "staging",\n  projectId: "prj_Ze66UvH4X9...t",\n  bearer: process.ENV.VERCEL_TOKEN,\n  forceNew: true,\n  files: [\n    {name: "index.html", data: "<h1>Test</h1>"}\n  ]\n}).then(res => {\n\tconsole.log('Result:', res)\n})\n

After giving this a quick run, I received an error bad_request with the following message: Invalid request: 'files[0]' should NOT have additional property 'name'. This was interesting 🤔 Even though the documentation didnt seem to point out what was needed, the endpoint was doing some type of check to see what properties are expected. Based on the response, it seems data is likely expected, but surely there must be a property to specify the file name. After giving ‘fileName’, and ‘filePath’ a try (both returning similar errors), I became frustrated and decided to rethink; even if I did manage to guess the name, there is no way data would work without additional formatting - how would I upload image content as a reasonably-lengthened string?

This realization drove me back to GitHub. Maybe (hopefully?) someone had the same question and found a solution? I searched through all repos including Vercel, but GitHub search really lived up to its bad reputation when it came to code-searching. Luckily they had another tool I could use (currently in beta). Enter GitHub CodeSearch.

$\"GitHub$

I began searching globally on CodeSearch for the Vercel deployment endpoint and in no time, I came across TeleportHQ’s repo which defined an interface named VercelFile. I was a little annoyed I didn’t try file as a property, but so relieved that there was a drop-in definition I could use.

After dropping in the definition and updating the above code, I gave it another run, and alas the deployment succeeded!

$\"Successful$

Once this step was cleared, I decided to go back to the documentation and see whether any of the optional query parameters for this endpoint would be of use for PF’s use-case; and that’s when I came across the second issue.

Unknown Types

This issue ended up being less of a blocker as some guesswork closed the gaps and allowed me to move forward, however I thought it was notable enough as in some cases, there were discrepancies between types.

Looking at the deployment endpoint’s query param options, I could see some properties were unknown. I checked the documentation’s own Types section to see if this had some explanation, but it didn’t.

$\"Unknown$

As ive mentioned before, this was less of an issue and more of an inconvenience as I was able to guess the data types for those parameters.

Final Notes: PF + ▲ = 💜

As noted by Vercel, changes that they make to the APIs will be outlined in their changelogs, and it is possible that some outlined issues above could have cropped up there, however, this exploration was purely to build a wrapper around the API for consumption by PF (as I couldn’t find a suitable one that already existed).

While this post outlines a couple of issues that I have personally come across while navigating the API endpoints that Vercel provides, It does not reflect the quality of their product or support that they provide. I personally^[2] use their platform for numerous projects, and it has served me well; I continue to recommend them to friends and learners at ProjectFunction.

Eventually, I was able to wrap a couple of the endpoints that I thought would be useful for PF, and I have to admit, the journey was fun. Moving forward, I can now integrate Vercel into the core of PFCampus to allow learners to deploy their work to showcase their abilities.

The resulting wrapper can be found on my GitHub repo. Feel free to use and contribute!

P.S. Make sure you follow me on the bird app for updates ✌🏽

\n
\n

Update: Improvement suggestion

As mentioned in my update note, I had a chance to chat to Meg last Thursday (24th Feb) about my experience and journey with the API docs. At the end of our talk, Meg asked “If you could change anything about the docs site, what would it be?” and it got me thinking. I remembered not long ago, I had a play around with Slack’s API and I really loved their API Tester feature (This feature can be seen with Google’s API Explorer too). This is what I think Vercel’s API docs could use.

It would help keep the docs somewhat in-date with API changes, as developers would be able to make a test API call with the required parameters within the doc, and see a realtime response; enabling them to see what is expected with the call, and what to expect as a response. By allowing the dev to select an Endpoint version, it puts emphasis on the idea that the endpoints are versioned, and allows users to see how calls and responses differ between versions. In a nutshell, the test API caller becomes the live documentation; Showing instead of telling.

\n
\n

^[1] ProjectFunction

^[2] This website was created using Next.js

\n","readTime":"9 minutes"},{"slug":"hooked-on-react","title":"useReact: My go-to React Hooks","date":"2022-02-01","lastUpdated":"2022-02-25","content":"\n\n\nWIP: This post is WIP. I plan to continue to update it as my React journey continues. \n\n\nTwo years ago, there was a hype around React; and after a couple of months of trying to avoid \nyet-another-javascript-framework, I gave up and decided to see what all the hype was all about. Since that time, Ive not\nlooked back.\n\nFast-forward to today, I've used React (specifically with Next.js) to create over 4 professional sites, and over 7 side\nprojects. And throughout that time I have created a few custom hooks that I found myself reusing across projects. These\nhooks help simplify my flow of data, and give me finer control over my components. These hooks may not be applicable to \nall types of applications, but for the most part they have been super useful for my use-cases:\n\n### UseAsync\n\nI use this hook to control data flow from async methods. This is usually from using third-party libraries, but can be \nuseful in other cases:\n\n```typescript jsx\nimport {useCallback, useEffect, useState} from \"react\";\n\nexport default function useAsync(method: () => Promise, dependencies:Array = []) {\n\tconst methodCaller = useCallback(()=>{\n\t\tsetError(null);\n\t\tsetStatus(\"pending\");\n\t\tmethod().then(response => {\n\t\t\tsetData(response);\n\t\t\tsetStatus(\"fulfilled\");\n\t\t}).catch(err => {\n\t\t\tsetError(err);\n\t\t\tsetStatus(\"rejected\");\n\t\t});\n\t}, [method, ...dependencies]);\n\tconst [data, setData] = useState(null);\n\tconst [status, setStatus] = useState<\"fulfilled\" | \"pending\" | \"rejected\">(\"pending\");\n\tconst [error, setError] = useState(null);\n\t\n\treturn {status, data, error, run:methodCaller};\n}\n\n// USAGE\nfunction MyComponent(){\n\tconst {data, run, status} = useAsync(()=> fetchMovieDetail('harry potter'));\n\n\treturn (\n\t\t

\n\t\t\t

{status === 'fulfilled' && JSON.stringify(data, null, '\\t')}

\n\t\t\t\n\t\t

\n\t)\n}\n```\n\n### UseRender\n\nOccasionally, I find myself needing to interface with third-party libraries and need to control the rendering cycle\nmanually. React is good at managing rendering cycles in most cases, but in those rare situations like when you are using\nthird-parties like Monaco, this may come in handy:\n\n```typescript jsx\nimport {useReducer} from \"react\";\n\nexport default function useRender() {\n\tconst [count, increment] = useReducer(n => n + 1, 0);\n\t\n\treturn {render:increment}\n}\n```\n\n### UseEvent\n\nWhile working on a previous side project, I found myself adding event listeners to dom events on a regular basis, so I\nended up with the following:\n\n```typescript jsx\nimport {useCallback, useEffect, useState} from \"react\";\n\nexport default function useEvent(element?: EventTarget) {\n\tconst [eventListeners, setEventListeners] = useState void)>>({});\n\t\n\tconst addEventListener = useCallback((eventName:string, eventHandler)=>{\n\t\tsetEventListeners(prev => {\n\t\t\treturn {\n\t\t\t\t...prev,\n\t\t\t\t[eventName]: eventHandler\n\t\t\t}\n\t\t});\n\t}, [eventTarget]);\n\tconst removeEventListener = useCallback((eventName:string)=>{\n\t\tsetEventListeners(prev => {\n\t\t\tconst draft = {...prev};\n\t\t\tdelete draft[eventName];\n\t\t\treturn draft;\n\t\t});\n\t}, [eventTarget]);\n\n\tuseEffect(() => {\n\t\tconst target = element ?? window;\n\t\tconst listeners = {...eventListeners};\n\t\t\n\t\t// addListeners\n\t\tObject.entries(listeners).forEach(entry => {\n\t\t\teventTarget.addEventListener(entry[0], entry[1]);\n\t\t});\n\t\t\n\t\t// remove old listeners\n\t\treturn ()=> {\n\t\t\tObject.entries(listeners).forEach(entry => {\n\t\t\t\teventTarget.removeEventListener(entry[0], entry[1]);\n\t\t\t});\n\t\t}\n\t}, [eventListeners]);\n\n\treturn {\n\t\ton:addEventListener,\n\t\toff:removeEventListener\n\t}\n}\n```\n\n### UseLockScroll\n\nFor accessibility-related work, I ended up needing a way to disable scroll lock when a modal component is mounted.\n\n```typescript jsx\nimport {useLayoutEffect} from \"react\";\n\nexport default function useLockScroll() {\n\tuseLayoutEffect(() => {\n\t\tconst previous = window.getComputedStyle(document.body).overflow;\n\n\t\tdocument.body.style.overflow = \"hidden\";\n\t\t\n\t\t// undo on unmount\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = previous\n\t\t};\n\t}, []);\n}\n```\n\n### Note\n\nFor now these have been my most used hooks. As my React journey continues, I may update this post to include\nnew hooks and explain their uses.\n\n✌🏽","renderedContent":"\nWIP: This post is WIP. I plan to continue to update it as my React journey continues. \n\n

Two years ago, there was a hype around React; and after a couple of months of trying to avoid
\nyet-another-javascript-framework, I gave up and decided to see what all the hype was all about. Since that time, Ive not
\nlooked back.

Fast-forward to today, I’ve used React (specifically with Next.js) to create over 4 professional sites, and over 7 side
\nprojects. And throughout that time I have created a few custom hooks that I found myself reusing across projects. These
\nhooks help simplify my flow of data, and give me finer control over my components. These hooks may not be applicable to
\nall types of applications, but for the most part they have been super useful for my use-cases:

UseAsync

I use this hook to control data flow from async methods. This is usually from using third-party libraries, but can be
\nuseful in other cases:

import {useCallback, useEffect, useState} from "react";\n\nexport default function useAsync<T>(method: () => Promise<T>, dependencies:Array<any> = []) {\n\tconst methodCaller = useCallback(()=>{\n\t\tsetError(null);\n\t\tsetStatus("pending");\n\t\tmethod().then(response => {\n\t\t\tsetData(response);\n\t\t\tsetStatus("fulfilled");\n\t\t}).catch(err => {\n\t\t\tsetError(err);\n\t\t\tsetStatus("rejected");\n\t\t});\n\t}, [method, ...dependencies]);\n\tconst [data, setData] = useState<T>(null);\n\tconst [status, setStatus] = useState<"fulfilled" | "pending" | "rejected">("pending");\n\tconst [error, setError] = useState<Error>(null);\n\t\n\treturn {status, data, error, run:methodCaller};\n}\n\n// USAGE\nfunction MyComponent(){\n\tconst {data, run, status} = useAsync(()=> fetchMovieDetail('harry potter'));\n\n\treturn (\n\t\t<div>\n\t\t\t<pre>{status === 'fulfilled' && JSON.stringify(data, null, '\\t')}</pre>\n\t\t\t<button onClick={run}>{status === 'pending' ? 'Pending' : 'Fetch'}</button>\n\t\t</div>\n\t)\n}\n

UseRender

Occasionally, I find myself needing to interface with third-party libraries and need to control the rendering cycle
\nmanually. React is good at managing rendering cycles in most cases, but in those rare situations like when you are using
\nthird-parties like Monaco, this may come in handy:

import {useReducer} from "react";\n\nexport default function useRender() {\n\tconst [count, increment] = useReducer(n => n + 1, 0);\n\t\n\treturn {render:increment}\n}\n

UseEvent

While working on a previous side project, I found myself adding event listeners to dom events on a regular basis, so I
\nended up with the following:

import {useCallback, useEffect, useState} from "react";\n\nexport default function useEvent(element?: EventTarget) {\n\tconst [eventListeners, setEventListeners] = useState<Record<string, ((ev: Event) => void)>>({});\n\t\n\tconst addEventListener = useCallback((eventName:string, eventHandler)=>{\n\t\tsetEventListeners(prev => {\n\t\t\treturn {\n\t\t\t\t...prev,\n\t\t\t\t[eventName]: eventHandler\n\t\t\t}\n\t\t});\n\t}, [eventTarget]);\n\tconst removeEventListener = useCallback((eventName:string)=>{\n\t\tsetEventListeners(prev => {\n\t\t\tconst draft = {...prev};\n\t\t\tdelete draft[eventName];\n\t\t\treturn draft;\n\t\t});\n\t}, [eventTarget]);\n\n\tuseEffect(() => {\n\t\tconst target = element ?? window;\n\t\tconst listeners = {...eventListeners};\n\t\t\n\t\t// addListeners\n\t\tObject.entries(listeners).forEach(entry => {\n\t\t\teventTarget.addEventListener(entry[0], entry[1]);\n\t\t});\n\t\t\n\t\t// remove old listeners\n\t\treturn ()=> {\n\t\t\tObject.entries(listeners).forEach(entry => {\n\t\t\t\teventTarget.removeEventListener(entry[0], entry[1]);\n\t\t\t});\n\t\t}\n\t}, [eventListeners]);\n\n\treturn {\n\t\ton:addEventListener,\n\t\toff:removeEventListener\n\t}\n}\n

UseLockScroll

For accessibility-related work, I ended up needing a way to disable scroll lock when a modal component is mounted.

import {useLayoutEffect} from "react";\n\nexport default function useLockScroll() {\n\tuseLayoutEffect(() => {\n\t\tconst previous = window.getComputedStyle(document.body).overflow;\n\n\t\tdocument.body.style.overflow = "hidden";\n\t\t\n\t\t// undo on unmount\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = previous\n\t\t};\n\t}, []);\n}\n

Note

For now these have been my most used hooks. As my React journey continues, I may update this post to include
\nnew hooks and explain their uses.

✌🏽

\n","readTime":"2 minutes"},{"slug":"something-needs-a-rejig","title":"Something needs a Rejig 👀","date":"2020-05-27","content":"\n\nEdit: This post was scheduled to be published on the 8th of April, but due to the COVID pandemic and the uni-related consequences it brought about, I had to delay the post. However, I can now confirm that I am now working on another project idea that I have a genuine interest in and enjoy working on.\n\n\nAs some of you may know, I am currently in the process of completing my final year project (FYP). Up until recently, I have been doing a dementia based project for my FYP. This included a web portal for carers to manage patients, as well as an Android app which the patients would have on their phone. The app was to help assist with daily tasks such as reminders to take medication, assist in making calls to carer and family members, as well as provide daily mental stimulation games.\n\nThe completed app itself would be designed with little-to-no learning curve, so that patients with stage 1 to 3 of dementia and those with memory deficiency would be able to use it with no problem. This would have relied heavily on the principal of repetition and inforcement.\n\nThe web platform would be accessible by the carer (who could potentially be assigned to multiple patients) and would allow them to remotely update medication reminders, update contact information, change the mental stimulation games and track behavioural changed based on time taken to carry out each task over time.\n\nInitially, I had so much excitement and ideas for this project, but over time I became more and more demotivated and lost all excitement and will to work on it. This got to the point where it made development depressing and I hated it 😭😭\n\nSo I got in touch with my Tutor and Module leader and requested a change of topic. The initial response was \"Normally; we'd say its too late, but due to circumstances we could look into the possibility. Do you have a rough idea of how long it will take?\". Once I calculated the time and sent a response I felt pretty sure this would be it... I'm still waiting.\n\nI've decided to take the risk and start working on the new project (called *rejig* - thanks to my friend [@rizbizkits](https://twitter.com/rizbizkits) for the name idea) despite the fact I am yet to hear back from the module leader. What i've discovered is that i'm much happier doing this work than I was when I was doing work on the previous topic.\n\n\"*I kindly await your response...*\"\n","renderedContent":"\nEdit: This post was scheduled to be published on the 8th of April, but due to the COVID pandemic and the uni-related consequences it brought about, I had to delay the post. However, I can now confirm that I am now working on another project idea that I have a genuine interest in and enjoy working on.\n\n

As some of you may know, I am currently in the process of completing my final year project (FYP). Up until recently, I have been doing a dementia based project for my FYP. This included a web portal for carers to manage patients, as well as an Android app which the patients would have on their phone. The app was to help assist with daily tasks such as reminders to take medication, assist in making calls to carer and family members, as well as provide daily mental stimulation games.

The completed app itself would be designed with little-to-no learning curve, so that patients with stage 1 to 3 of dementia and those with memory deficiency would be able to use it with no problem. This would have relied heavily on the principal of repetition and inforcement.

The web platform would be accessible by the carer (who could potentially be assigned to multiple patients) and would allow them to remotely update medication reminders, update contact information, change the mental stimulation games and track behavioural changed based on time taken to carry out each task over time.

Initially, I had so much excitement and ideas for this project, but over time I became more and more demotivated and lost all excitement and will to work on it. This got to the point where it made development depressing and I hated it 😭😭

So I got in touch with my Tutor and Module leader and requested a change of topic. The initial response was “Normally; we’d say its too late, but due to circumstances we could look into the possibility. Do you have a rough idea of how long it will take?”. Once I calculated the time and sent a response I felt pretty sure this would be it… I’m still waiting.

I’ve decided to take the risk and start working on the new project (called rejig - thanks to my friend @rizbizkits for the name idea) despite the fact I am yet to hear back from the module leader. What i’ve discovered is that i’m much happier doing this work than I was when I was doing work on the previous topic.

“I kindly await your response…”

\n","readTime":"2 minutes"},{"slug":"did-a-thing-pyro","title":"I did a thing... PyroGist 👨🏽‍💻","date":"2020-03-05","content":"\n\nAs some of you might have heard, ProjectFunction is partnering up with NTU to deliver a 2 weeks intensive course. As with other PF courses we have run in the past, this one will be open to those who are under-represented in the industry. As part of this programme, learners will have the opportunity to take part in workshops and attend talks related to working in tech. Additionally, they will have the opportunity to apply all the skills they gather and the knowledge they gain, to design and implement their own website.\n\nIn preparation for this, I have started writing up some documentation and tasks for the learners. While doing the documentation for this, I came across 2 issues; firstly, there was no way to natively embed non-gist GitHub code into webpages, and secondly the option provided by GitHub does not make it difficult, if not impossible to restyle.\n\nAs it currently stands, GitHub allows you to embed gists into your webpage using the _embed_ option. But this comes in the form of a `\n\n\n\n\n

\nPyroGist(\"#preview\",{\n url: \"https://github.com/daryl-cecile/MiniTest-1/blob/master/test.js\",\n theme: \"normal\",\n autoFit: true,\n highlight: true\n});\n

\n\nThe example above shows how to embed a simple mock test file from a GitHub repository. If you wish to embed custom content (not hosted on GitHub), you can put the content directly into the body of the containing element and ignore the 'url' option.\n\n

\nPyroGist(\"#preview2\",{\n name: \"My custom file\",\n theme: \"normal\",\n autoFit: true,\n highlight: true\n});\n

\n\nCurrently, the highlighting is done by the highlightjs library (which users have to link themselves if they want syntax highlighting). However, the default colors can be easily overridden using custom CSS.\n\n\n\nEven though this library has a long way to go, I feel fairly comfident that it has met my initial goals and can serve its original purpose. In the near future, I intend to make GitHub gists embeddable via url. Additionally, I may create an adapter or customElement to automatically load the previews directly from markup (something like ``).\n\n\nUntil then... ✌🏽\n\n--\n\n_P.S. This library can be found [here](https://github.com/daryl-cecile/PyroGist), on my GitHub account!_\n","renderedContent":"

As some of you might have heard, ProjectFunction is partnering up with NTU to deliver a 2 weeks intensive course. As with other PF courses we have run in the past, this one will be open to those who are under-represented in the industry. As part of this programme, learners will have the opportunity to take part in workshops and attend talks related to working in tech. Additionally, they will have the opportunity to apply all the skills they gather and the knowledge they gain, to design and implement their own website.

In preparation for this, I have started writing up some documentation and tasks for the learners. While doing the documentation for this, I came across 2 issues; firstly, there was no way to natively embed non-gist GitHub code into webpages, and secondly the option provided by GitHub does not make it difficult, if not impossible to restyle.

As it currently stands, GitHub allows you to embed gists into your webpage using the embed option. But this comes in the form of a <script> tag that you insert into the page. This makes embedding simple, but at the cost of interface customizations. So I made my own. Now I know there are other solutions out there such as gist-it but I thought it would be a good challenge to implement my own.

My main priority when creating this was simplicity and customizability. I wanted the library to be easy to use, but also provide some customization options. Furthermore, I wanted to keep the element in the light DOM (outside of the shadow DOM) to ensure users could go even further with their customizations by using custom CSS.

Here is what I ended up creating:

\n $\"Screenshot$ \n

As pictured above, the result allows the user to match the style of the embedded content to fit their page design. In order to use the library, you first have to link the stylesheet and put the script in the <head> of the destination document. Once you have this, PyroGist can be initialized.

\n\n\n\n\n

\nPyroGist(\"#preview\",{\n url: \"https://github.com/daryl-cecile/MiniTest-1/blob/master/test.js\",\n theme: \"normal\",\n autoFit: true,\n highlight: true\n});\n

The example above shows how to embed a simple mock test file from a GitHub repository. If you wish to embed custom content (not hosted on GitHub), you can put the content directly into the body of the containing element and ignore the ‘url’ option.

\nPyroGist(\"#preview2\",{\n name: \"My custom file\",\n theme: \"normal\",\n autoFit: true,\n highlight: true\n});\n

Currently, the highlighting is done by the highlightjs library (which users have to link themselves if they want syntax highlighting). However, the default colors can be easily overridden using custom CSS.

\n\n

Even though this library has a long way to go, I feel fairly comfident that it has met my initial goals and can serve its original purpose. In the near future, I intend to make GitHub gists embeddable via url. Additionally, I may create an adapter or customElement to automatically load the previews directly from markup (something like <pyro-gist url="/file/example.js"></pyro-gist>).

Until then… ✌🏽

–

P.S. This library can be found here, on my GitHub account!

\n","readTime":"3 minutes"},{"slug":"pf-february-update","title":"PF February Update ⚡️🧙🏽‍♂️","date":"2020-02-29","content":"\n\nThis month's entry is comparatively short to the last, as it is not what I had initially planned to post. This is due to me spending almost an hour and half doing the write up for the original post to then decide at the very last minute that I needed more time to refine the wording of the content. So here is a short post 😂\n\nAs of two weeks ago, Rizwana and I have made the decision to overhaul the ProjectFunction website. This decision is a result of the increased intake in students. When I first wrote the original website, It was done very haphazardly. At the time, it felt more important to launch something that the learners could make use of to enhance their experience of ProjectFunction; and so I prioritised meeting a delivery deadline over maintainability, and as you can guess, this has not gone down well. 🤦🏽‍♂️\n\nThe backend for the original database was written in PHP and the data was maintained in a (very) _loosely_ relational MySQL database. Even though this allowed me to make changes to the database structure within minutes without losing any data, it did lead to a lot of redundant data. During the development of the website, I knew deep down it would need rewriting from the ground up. After all, the website was made as a proof-of-concept, and it was so well received that we ended up adding more features instead of re-writing. But now it is time.\n\nDue to our future plans and use-cases involving user-automated-tests, we have decided to move over to a NodeJS backend. This would mean we could re-use some of the libraries we have created over the year in both the front and backend, as well as run all user-automated-tests on our own end (instead of using heroku and hooks and hacky magic stuff 🧙🏽‍♂️)\n\nLast week, I started some work on the new system, setting up the server, services, and database structure. The number one difficulty I had with this process was moving the data we had over from the current (un)relational database, to our new one. Because of how much redundant data there was, as well as the lack of relations between some of the tables, I ended up having to create a data dump of the old database, then use a js script to read, analyse and re-associate each of the data entries so that they could be seeded into the new fully-relational database. Surprisingly, this process only took 4 minutes.\n\nSo far, the database is fully set up and functional. All that is left to do now is move-over some of the old php-based views to EJS, and create routers for the new website. As for the design of the new website, we intend to keep the same look and feel, so the stylesheets we already have will be reused.\n\nAs we've done in the past, we wont be minifying or obfuscating any of the resources. This was a conscious decision to enable learners to view the source of our website and see an untouched version of the resources. And based on the feedback we got from some learners, this was a good move as it enabled them to understand how we implemented some parts of our website.⚡️\n\nOver the next few weeks, we intend on working solely on the LMS side of the ProjectFunction website, so that it is ready for use in June. During this time, some parts of the website may change (for the better) as we decide what to keep, remove, and update. Once the site is ready for launch, we shall decomission the old LMS, and start working on moving the current visitor-facing site (i.e. The ProjectFunction homepage) over to NodeJS.\n\nUntil then... ✌🏽\n\n--\n\n_P.S. I realise now that this wasn't exactly a \"short\" entry, but I know if I go back to make changes, this post wont be out on time... So, here_ 🤷🏽‍♂️\n\n_P.P.S. We got us some customized ProjectFunction business cards!_\n\n\n![Me holding my new PF business card](/images/business_card_1.jpeg)","renderedContent":"

This month’s entry is comparatively short to the last, as it is not what I had initially planned to post. This is due to me spending almost an hour and half doing the write up for the original post to then decide at the very last minute that I needed more time to refine the wording of the content. So here is a short post 😂

As of two weeks ago, Rizwana and I have made the decision to overhaul the ProjectFunction website. This decision is a result of the increased intake in students. When I first wrote the original website, It was done very haphazardly. At the time, it felt more important to launch something that the learners could make use of to enhance their experience of ProjectFunction; and so I prioritised meeting a delivery deadline over maintainability, and as you can guess, this has not gone down well. 🤦🏽‍♂️

The backend for the original database was written in PHP and the data was maintained in a (very) loosely relational MySQL database. Even though this allowed me to make changes to the database structure within minutes without losing any data, it did lead to a lot of redundant data. During the development of the website, I knew deep down it would need rewriting from the ground up. After all, the website was made as a proof-of-concept, and it was so well received that we ended up adding more features instead of re-writing. But now it is time.

Due to our future plans and use-cases involving user-automated-tests, we have decided to move over to a NodeJS backend. This would mean we could re-use some of the libraries we have created over the year in both the front and backend, as well as run all user-automated-tests on our own end (instead of using heroku and hooks and hacky magic stuff 🧙🏽‍♂️)

Last week, I started some work on the new system, setting up the server, services, and database structure. The number one difficulty I had with this process was moving the data we had over from the current (un)relational database, to our new one. Because of how much redundant data there was, as well as the lack of relations between some of the tables, I ended up having to create a data dump of the old database, then use a js script to read, analyse and re-associate each of the data entries so that they could be seeded into the new fully-relational database. Surprisingly, this process only took 4 minutes.

So far, the database is fully set up and functional. All that is left to do now is move-over some of the old php-based views to EJS, and create routers for the new website. As for the design of the new website, we intend to keep the same look and feel, so the stylesheets we already have will be reused.

As we’ve done in the past, we wont be minifying or obfuscating any of the resources. This was a conscious decision to enable learners to view the source of our website and see an untouched version of the resources. And based on the feedback we got from some learners, this was a good move as it enabled them to understand how we implemented some parts of our website.⚡️

Over the next few weeks, we intend on working solely on the LMS side of the ProjectFunction website, so that it is ready for use in June. During this time, some parts of the website may change (for the better) as we decide what to keep, remove, and update. Once the site is ready for launch, we shall decomission the old LMS, and start working on moving the current visitor-facing site (i.e. The ProjectFunction homepage) over to NodeJS.

Until then… ✌🏽

–

P.S. I realise now that this wasn’t exactly a “short” entry, but I know if I go back to make changes, this post wont be out on time… So, here 🤷🏽‍♂️

P.P.S. We got us some customized ProjectFunction business cards!

\n $\"Me$ \n","readTime":"3 minutes"},{"slug":"futuristic-pursuit","title":"Futuristic Pursuit 🐣","date":"2020-01-31","content":"\n\nFor the past 4 years, I've been telling myself that I will be ready for adult life when it comes - and until recently, that was true. I've always had a clear image of what I wanted to achieve in the future; Since college, I knew that I wanted to start my own (side?) project/company, and find a job in development somewhere that is chill. But now that I am finally about to step into proper \"adult life\", I cant help but feel like i'm not as ready as I thought 😬\n\nThe plan throughout uni was that i'd move back to London once my degree was over, find a job somewhere there as a software developer, and maybe start a company of my own (on the side). In fact, I was so confident in that plan until recently. Last year, during my time on placement at a company in Nottingham called ERT, a dear friend of mine ([@rizbizkits](https://twitter.com/rizbizkits)) and I co-founded an initiative called ProjectFunction (find out about it [here](https://projectfunction.io)).\n\nProjectFUnction has been quite successful, however, I never expected it to gain so much traction in the Nottingham Tech community. This made me realize that I would need to stick around in Notts a bit longer after uni to see it through its untapped potential. After some mental back and forth, I accepted that my plans to go back home to London would have to be put on hold. So now, I find myself looking for a place to stay for next year (as I'm currently staying in a student-only accomondation).\n\nI've been looking around Nottingham for a chill 2 bedroom flat - ideally one with parking, cat-friendly and on the ground floor. After all, Panther needs a place to stay too 😼\n\n![Panther cat doing a big stretch on the bed](/images/pantherCat.jpg)\n\nThe places i've seen so far are quite afordable too, but then I realized, if I'm staying in Nottingham, I need to start looking for places _in_ Notts 🤦🏽‍♂️. So I started looking...\n\n_In retrospect, I realize that moving away from home to university in Nottingham was nothing compared to the \"adult life\" im finding myself flying towards this year. In fact, I'm not even sure I am ready for it in all honesty. But here we are 🤷🏽‍♂️_\n\nIn December, my friend Rizwana and I were discussing what kind of places I was looking for in terms of jobs, and after giving it some thought, considering my past experiences, it became clear that I had a rough idea of what I wanted 👇🏽\n\n- A startup-like environment would be great (1 - 30 people)\n- Being flexible enough to work from home\n- Having personal-development budget and opportunities\n- No crunch-time (clear seperation of work and personal life)\n- Countless opportunities for career-progression\n- Diverse and inclusive teams\n- Experimental when it comes to implementing new ideas\n- A place that is not afraid to make their own tools to aid development\n- Open-souce contributors would be nice\n- Friendly/community-like team\n- A place that is happy to work and give back to the community\n- Somewhere that uses cutting edge technology\n\nAll in all, I have a clear idea of the kind of workplace where I want to work as a Web developer 👨🏽‍💻. Now I just need to find it and make it happen. I guess i'll find out when it gets to it. I just hope that the place I find meets those points as closely as possible 🤞🏽. Once I do that, I can finally start focusing on ProjectFunction, and the many plans we have for it in the near future!","renderedContent":"

For the past 4 years, I’ve been telling myself that I will be ready for adult life when it comes - and until recently, that was true. I’ve always had a clear image of what I wanted to achieve in the future; Since college, I knew that I wanted to start my own (side?) project/company, and find a job in development somewhere that is chill. But now that I am finally about to step into proper “adult life”, I cant help but feel like i’m not as ready as I thought 😬

The plan throughout uni was that i’d move back to London once my degree was over, find a job somewhere there as a software developer, and maybe start a company of my own (on the side). In fact, I was so confident in that plan until recently. Last year, during my time on placement at a company in Nottingham called ERT, a dear friend of mine (@rizbizkits) and I co-founded an initiative called ProjectFunction (find out about it here).

ProjectFUnction has been quite successful, however, I never expected it to gain so much traction in the Nottingham Tech community. This made me realize that I would need to stick around in Notts a bit longer after uni to see it through its untapped potential. After some mental back and forth, I accepted that my plans to go back home to London would have to be put on hold. So now, I find myself looking for a place to stay for next year (as I’m currently staying in a student-only accomondation).

I’ve been looking around Nottingham for a chill 2 bedroom flat - ideally one with parking, cat-friendly and on the ground floor. After all, Panther needs a place to stay too 😼

\n $\"Panther$ \n

The places i’ve seen so far are quite afordable too, but then I realized, if I’m staying in Nottingham, I need to start looking for places in Notts 🤦🏽‍♂️. So I started looking…

In retrospect, I realize that moving away from home to university in Nottingham was nothing compared to the “adult life” im finding myself flying towards this year. In fact, I’m not even sure I am ready for it in all honesty. But here we are 🤷🏽‍♂️

In December, my friend Rizwana and I were discussing what kind of places I was looking for in terms of jobs, and after giving it some thought, considering my past experiences, it became clear that I had a rough idea of what I wanted 👇🏽

A startup-like environment would be great (1 - 30 people)
Being flexible enough to work from home
Having personal-development budget and opportunities
No crunch-time (clear seperation of work and personal life)
Countless opportunities for career-progression
Diverse and inclusive teams
Experimental when it comes to implementing new ideas
A place that is not afraid to make their own tools to aid development
Open-souce contributors would be nice
Friendly/community-like team
A place that is happy to work and give back to the community
Somewhere that uses cutting edge technology

All in all, I have a clear idea of the kind of workplace where I want to work as a Web developer 👨🏽‍💻. Now I just need to find it and make it happen. I guess i’ll find out when it gets to it. I just hope that the place I find meets those points as closely as possible 🤞🏽. Once I do that, I can finally start focusing on ProjectFunction, and the many plans we have for it in the near future!

\n","readTime":"3 minutes"}]}],["$","div",null,{"className":"$undefined"}]]}]