Achieving WCAG A Compliance for Boards
↗ padlet.blogDecember 2, 2024
Padlet has launched a project to bring its Board product to WCAG (Web Content Accessibility Guidelines) Level A standards, focusing on improved text alternatives for images, better keyboard navigation, and robust screen reader compatibility.
What it takes to scroll well
↗ padlet.blogMay 1, 2023
This article, reposted from Padlet's blog, is their first-ever technical piece. With books, we have the freedom to include as many pages as necessary to convey information to our readers. However, with screen devices, we are limited to a single fram...
My Hacktoberfest Experience For The Third Time: 2022 Edition
October 31, 2022
It is my 3rd time joining Hacktoberfest. This time, I chose to join the event as both a maintainer and a contributor. Being a contributor Last year, I was quite active as a contributor. However, this year, I went on a 3-week holiday and couldn’t acce...
Swept along by life to be a software developer
August 22, 2022
Growing up in Singapore, I was taught not to chase my dreams. Today, I am still living the mediocre person’s life, and the only difference is that I have a job title of a Software Developer. I like coding and creating solutions to improve people’s li...
A Quick Guide To Building Good React Native Mobile Apps
May 20, 2022
It’s been around 5 months since I started learning React Native with Typescript. Here are some tips, tricks & resources that I’ve gathered along the way which may help you on the following topics: Project Templates Local Storage, SVG, Accessibility,...
Adding Custom Assets In React Native — made easy!
May 8, 2022
Introduction Having custom assets is pretty important to make your app look unique for both branding and user experiences purposes. On desktop, in the millions of tabs that are left open in the browser, users find their target web application primari...
How to create and test a GitHub Action that generates Supabase database types
April 6, 2022
Recently I started a side project Billy, a React Native bill tracker app which uses Supabase for user management & database. Initially, I wasn’t too sure of all the fields that the Bill model should have, so as I developed the project, the data model...
A Strange Moment.js — 3 Gotchas for Working & Testing with Datetimes
March 24, 2022
Introduction to Moment.js Moment.js is the most commonly used JavaScript library to deal with datetimes, however for many use cases today, it may not be the best library to use given the issues of mutability, file size bundles and that it was designe...
From Fetch to Axios — A better way to call APIs
March 10, 2022
Introduction to fetch Fetch is a Web API for you to make API requests and fetch resources in an easy way. It is also how most new web developers learn to call APIs. According to MDN Docs, it returns a promise that will not reject on HTTP error statu...
Sign up users easily with SuperTokens: Email Password Authentication
February 17, 2022
Supertokens is an open source user authentication library that is quick to implement and easy to customize for developers. In this series, I will teach you how to add email password authentication based on SuperTokens into a project where the tech st...
How to create a CSS Playground for styling Pseudo-elements with Vanilla JavaScript
February 6, 2022
In this article, I will show you how to implement 3 features that I thought to be valuable of a CSS playground (here's the why section if you want to learn why before how) using CSS and Vanilla JavaScript. Live Preview Export CSS Functionality CSS V...
Introduction to Enterprise Backend Development: Service Design Considerations
January 13, 2022
In enterprise projects, you would often be thrown to work on a random spot of a very big system rather than building services one by one from ground up like start-ups. Hence, it could be much more difficult to grasp and piece together the different b...
Be a dev detective with Sourcegraph 🔍
December 13, 2021
In this article, I will show you a simple scenario where you can learn how to utilize Sourcegraph to: Figure out the library of an unfamiliar UI component & use it in a project Find other projects that use this UI component Monitor for new projects...
Make your website stand out with a custom scrollbar 🌟
November 25, 2021
The scrollbar is easily one of the most neglected UI components out there that are not leveraged by many websites to enhance their users' experience. By default, on all HTML, when the content of the website exceeds the viewport height, a scrollbar wi...
Introduction to Scalable Vector Graphics (SVG)
November 16, 2021
This article is an enhanced version of the lunch & learn session that I presented recently on Introduction to Scalable Vector Graphics. You can navigate the slides by using your arrow keys <- ->. The slides can be found here, where you can choose to ...
My Hacktoberfest Experience For The Second Time: 2021 Edition
October 29, 2021
In October 2021, I have joined Hacktoberfest for the 2nd time, with much more elaborate goals and commitment compared to the 1st time when I joined Hacktoberfest 2 years back. I still have the shirt from my participation back then. Here's a picture o...
Get the best out of Hacktoberfest as a contributor
October 16, 2021
We have reached the 2nd half of Hacktoberfest. This year, the event is super hyped with plenty of swags from different communities in addition to the cool tee/tree that you would get from Digital Ocean ⚡️ While all of these are motivations for you to...
The Open Source & Hacktoberfest Anthology🌻🔖
September 28, 2021
A quality curated collection that you can check out anytime before, during, and even after Hacktoberfest 2021 💻 Here, you will find articles, hands-on tutorials, repositories, and communities where you will learn and improve your understanding about...
Migrate a non-CRA React project to Next.js
September 26, 2021
In this tutorial, I will be demonstrating step by step how I migrated a React(JS) Single Page Application (SPA) project to Next.js. No knowledge of Next.js concepts is required to follow along. The article includes the issues that I've met and the re...
Developer insights: Why you should conduct user interviews
September 24, 2021
What is a user interview? Everyday, you probably would have said something along the lines of: "Hey, how're you doing at work?" "What would you guys want for lunch?" "How is the COVID-19 situation is still so bad everywhere?" "Mom! Why are you actin...
3 easy steps that I used to work on my side project more effectively
September 16, 2021
The difficulty of working on a side project Have you ever felt stuck on coming up with a side project idea and committing to it? That's how I felt for a very long time - even when I have been working as a software developer for a whole year after I g...
How I started Technical Writing
September 14, 2021
Where it began 5 years ago, being a typical mugger (Singlish term for a studious person 🍺) in my school days, writing notes for myself and sharing it with my friends was a norm for me. There used to be a local popular A-Level notes platform called...
VueJS fundamentals + resources for React Developers
September 11, 2021
Introduction This blog post aims to teach you about the fundamental concepts of VueJS from a React developer's perspective so that you can use your existing knowledge of components to easily pick up VueJS and add this framework into your skillset. T...
Creating Tooltips with Tippy.js | My learning experience and why you should use it
September 7, 2021
First off, what is a Tooltip? A tooltip is a form of popup UI that serves to give more information about a particular component of subject matter. You might see them around in some websites that prefer to use icon buttons to reduce mental load of the...
A simple introduction to CSS Pseudo-elements & Pseudo-classes
September 5, 2021
Introduction A very simple codepen has been created to illustrate pseudo-elements and pseudo-classes as shown below. Try interacting with the different buttons. https://codepen.io/lyqht/pen/qBjBxzP Some interactions that you should have observed: If...
What the FOUC is happening: Flash of Unstyled Content
September 1, 2021
Recently while I was browsing Instagram stories on my phone, a certain ad by Kopidate caught my eye. Despite having 'date' as part of its name, I thought it was interesting that they say it is not a matchmaking site but for humanising 1:1 connections...
Why you might not be learning as effectively
↗ dev.toApril 18, 2021
As a #CodeNewbie, a common means of learning here is to: read articles to improve your knowledge, and later write your own to internalize your learning. However, I want to point it out explicitly that... Your learning style could be a reason why...
What is Skeleton Loading and how to implement it in React
April 16, 2021
Background Last week, I saw an interesting thread discussion about how to reduce the Largest Contentful Paint (LCP) time that is caused by a component that takes a long time to load. In 2020, LCP was 1 of the 3 metrics of the Core Web Vitals declare...
3 reasons why you should know about Atomic Design as a Developer
↗ dev.toApril 6, 2021
I've given a Lunch & Learn session 🍚⏲️ at my company to talk about Atomic Design and how it is related to the React library. The responses were great, so I decided to transcribe the most important concepts covered in my talk into this article, and r...
Basics of testing an open source API with Postman
↗ community.codenewbie.orgMarch 31, 2021
This is the 2nd part of a tutorial series of 3 articles, and it assumes that you have read the previous article. If you have not, head over there now 🏃🏃🏃 In the last episode... We learnt how to inspect elements on the frontend in the previous epi...
Navigate the frontend easily with the Inspector
February 24, 2021
Introduction This is the 1st part of a tutorial series of 3 articles. What's so special about this series? This series is intended for both non-dev and newbie dev peeps. What makes this guide stand out is that instead of just teaching you what are th...