Achieving WCAG A Compliance for Boards

Achieving WCAG A Compliance for Boards

↗ padlet.blog

December 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.

Accessibility
What it takes to scroll well

What it takes to scroll well

↗ padlet.blog

May 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...

CSS Developer HTML5 UI
My Hacktoberfest Experience For The Third Time: 2022 Edition

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...

hacktoberfest2022 Open Source supabase Developer
Swept along by life to be a software developer

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...

4articles4weeks software development Learning Journey Productivity week1
A Quick Guide To Building Good React Native Mobile Apps

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,...

THW Mobile Apps React Native Open Source debugging Programming Tips
Adding Custom Assets In React Native — made easy!

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

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...

GitHub TypeScript Open Source General Programming Databases
A Strange Moment.js — 3 Gotchas for Working & Testing with Datetimes

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...

JavaScript Testing Open Source Tutorial Node.js
From Fetch to Axios — A better way to call APIs

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

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...

Open Source Tutorial authentication React Native Node.js
How to create a CSS Playground for styling Pseudo-elements with Vanilla JavaScript

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...

CSS HTML5 Web Development JavaScript Tutorial
Introduction to Enterprise Backend Development: Service Design Considerations

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...

APIs software architecture backend Beginner Developers
Be a dev detective with Sourcegraph 🔍

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...

UI Frontend Development Vue.js Open Source Tutorial
Make your website stand out with a custom scrollbar 🌟

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)

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 ...

SVG Frontend Development HTML5 Design Web Development
My Hacktoberfest Experience For The Second Time: 2021 Edition

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...

Open Source GitHub #hacktoberfest General Programming Twitter
Get the best out of Hacktoberfest as a contributor

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...

Open Source Developer Web Development Frontend Development Tutorial
The Open Source & Hacktoberfest Anthology🌻🔖

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...

Developer Open Source software development HTML5 Web Development
Migrate a non-CRA React project to Next.js

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...

Next.js React Web Development 2Articles1Week hashnodebootcamp
Developer insights: Why you should conduct user interviews

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...

UX Developer hashnodebootcamp 2Articles1Week Productivity
3 easy steps that I used to work on my side project more effectively

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...

Web Development 2Articles1Week hashnodebootcamp General Advice General Programming
How I started Technical Writing

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...

hashnodebootcamp Developer Blogging Technical writing 2Articles1Week
VueJS fundamentals + resources for React Developers

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...

Vue.js React Web Development 2Articles1Week General Programming
Creating Tooltips with Tippy.js | My learning experience and why you should use it

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...

CSS JavaScript Web Development 2Articles1Week Tutorial
A simple introduction to CSS Pseudo-elements & Pseudo-classes

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...

CSS Design Web Development 2Articles1Week Tutorial
What the FOUC is happening: Flash of Unstyled Content

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...

Frontend Development CSS React 2Articles1Week
Why you might not be learning as effectively

Why you might not be learning as effectively

↗ dev.to

April 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...

watercooler Productivity Developer
What is Skeleton Loading and how to implement it in React

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...

React Web Development TIL
3 reasons why you should know about Atomic Design as a Developer

3 reasons why you should know about Atomic Design as a Developer

↗ dev.to

April 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...

Design React Frontend Development General Programming Developer
Basics of testing an open source API with Postman

Basics of testing an open source API with Postman

↗ community.codenewbie.org

March 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...

Beginner Developers General Programming APIs Web Development
Navigate the frontend easily with the Inspector

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...

Web Development HTML5 Developer General Programming Beginner Developers