Resources

This page contains a wide range of resources that I found useful.

Knowledge

You need to have some knowledge first before you can create something. This is a list of trustworthy resources to get some knowledge.

FED Mentor

Grace Snow is an accessibility expert who writes amazing blog posts that can be easily understood by beginners. I highly recommend reading her blog posts.

Easy Checks – A First Review of Web Accessibility | Web Accessibility Initiative (WAI) | W3C

This page helps you start to assess the accessibility of a web page. With these simple steps, you can get an idea whether or not accessibility is addressed in even the most basic way.

Doing a basic accessibility check if you cannot do a detailed one - GOV.UK

Another basic accessibility check.

Solid Start

This is a good website for everyone that getting started to learn about web accessibility. It also provides some great resources.

A11y Coffee

It is a friendly website that teaches web accessibility, starting from "What is 'a11y'?". You can read the article while enjoying a cup of coffee.

Accessibility Myths

It is a project debunking common accessibility myths. There are 22 myths that have been debunked.

WebAIM: HTML Semantics and Accessibility Cheat Sheet

A table listing common HTML elements that have an impact on accessibility for users with disabilities.

Inclusive Components

This is my first go-to resource when I want to create an accessible component.

Patterns | APG | WAI | W3C

It is like "Inclusive Components". It contains various examples to create accessible components.

Axe HTML 4.5 rules

This contains rules to follow to create accessible HTML. Each rule has its article to explain how to fix the problem. I recommend bookmarking it.

Scott O'Hara - Blog Posts

Scott is an accessibility engineer at Microsoft. He has written a lot of blog posts about web accessibility since 2013.

Andy Bell (Piccalilli) - Blog Posts

His blog posts are about web accessibility and other topics that are related to web development such as CSS, progressive enhancement, and much more.

Adrian Roselli — Consultant, Writer, Speaker

Adrian is an accessibility expert who has been writing blogs since before I was born. I recommend exploring his website to learn more about web accessibility.

Checklist - The A11y Project

This contains practical things to do a manual accessibility audit.

Posts - The A11Y Project

The A11Y Project has a lot of amazing blog posts about web accessibility.

Resources - The A11Y Project

I also recommend checking the resources page.

Web Content Accessibility Guidelines (WCAG) 2.1

The WCAG is a set of technical standards developed by the World Wide Web Consortium (W3C) to provide guidelines for making web content accessible to users with disabilities.

How to Meet WCAG (Quickref Reference) 2.1

I did a manual accessibility using this.

Colour Blind Awareness

You can learn about different types of color blindness.

kdeldycke/awesome-falsehood: 😱 Falsehoods Programmers Believe in

The falsehood articles listed there give a comprehensive list of those false-beliefs that you should be aware of, to help you become a better programmer.

GitHub - denysdovhan/wtfjs: 🤪 A list of funny and tricky JavaScript examples

JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.

GitHub Pages: The Missing Manual | Simon Willison’s TILs

GitHub Pages is an excellent free hosting platform, but the documentation is missing out on some crucial details.

Deceptive Patterns - Home

Deceptive patterns (also known as “dark patterns”) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something.

The HTML Hell Page

A list of things to do when creating a website that comes from hell. Please do not create an HTML Hell Page.

Free For Life

A massive list including a huge amount of products and services that are completely free!

Your Personal Web Site

Bill Dietrich created a list that you can do to set up a personal website.

Exploring the Personal Web ～ foreverliketh.is

Looking for inspiration to spice up your personal website? Or are you looking for someone to chat to on the internet? That blog post is a great place for those things.

Blogging platform

Once you have gained some knowledge, why not teach it to others? You can write and share what you have learned to improve your knowledge.

Bear Blog

A privacy-first, no-nonsense, super-fast blogging platform. No trackers, no javascript, no stylesheets. Just your words.

Mataroa — Blogging platform for minimalists

Naked blogging platform, for minimalists. Just write.

Conference Talks

You can get a lot of information from watching experts talk about web development.

How To Get Hired as a Web Developer & WOW Hiring Managers + much more | AMA with Matt Studdert - YouTube

In this video, Matt is answering some incredible questions. I like his answer for the "how do you choose what to focus on learning?". He said that you should just focus on the next thing. For me, that answer put my worries to rest.

Selfish Accessibility | Adrian Roselli | Talks at Google - YouTube

This is a great video to help you aware of web accessibility. Also, you will learn different situations of users that want to access the web. Plus, how to do manual testing to check the accessibility of your website. I highly recommend watching it.

Manuel Matuzović - Lost in Translation - YouTube

HTML is not as easy as you think.

Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

A great talk by Andy Bell that will tell you that good HTML markup can be a strong foundation for your website. Then, how to write modern CSS with progressive enhancement.

Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

Another great talk that covers modern CSS. I recommend watching it to take your CSS skill to the next level.

Resilient CSS: 7-part Series - YouTube

This series created by Jen Simmons taught me different ways to write CSS that will fail nicely. Also, a guide to using the "Can I Use" website to help me decide how I craft my CSS.

Writing Less Damned Code – Heydon Pickering – btconfBER2016 - YouTube

Less is less. Less code means less problems, less issues, and more time to spend for other things in life.

Heydon Pickering - Why Inclusive Design is like cooking a curry - YouTube

Learning web accessibility can be like learning to cook a curry.

Sophie Koonin – This Website Is under Construction, a Love Letter to the Personal Website – btconf - YouTube

Personal websites are wild. Those websites are the places to do experiment, post anything you like, and many other things. This talk is about how websites have evolved from the early days to now.

AXSchat with Heydon Pickering. UX designer, accessibility advocate, and illustrator. - YouTube

"Designing is thinking and developing is doing and if you can't do either of those or you can't do both at the same time then you are not awake basically.", said Heydon Pickering at 37:26

Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

Andy Bell shows you how to use modern CSS to create responsive website without media queries.

CSS for Software Engineers for CSS Developers – Harry Roberts / Front-Trends 2016 - YouTube

Harry Roberts explains how to use programming principles—such as Don't Repeat Yourself (DRY), The Single Responsibility Principle, and many more—to write CSS.

FaCSSt: CSS & Performance. Harry Roberts. JS Fest 2018 - YouTube

Harry Roberts shares seven ways to improve CSS performance in a room full of JavaScript developers.

From Milliseconds to Millions: The Numbers Driving Web Perf | Harry Roberts | performance.now() 2019 - YouTube

"Don't do it for the money, but never do it for no money." — Oliver Reichenstein, a friend of Harry Roberts

Harry Roberts - Get Your "head" Straight - YouTube

Despite being the only section of a website that a user never sees, the head element is arguably the most important. It is bound to its own unique set of rules and often governs the overall speed of the page.

Harry Roberts - Optimising Largest Contentful Paint - YouTube

Harry Roberts shares some ways to optimize Largest Contentful Paint (LCP).

Harry Roberts - Why Fast Matters - YouTube

With more and more emerging markets coming online, and more and more apps moving to the web platform, we’re reaching an intersection where connections are getting slower and websites are getting heavier. In this talk, Harry Roberts will teach us what these emerging markets mean to us, and how we can begin to move in the right direction.

Refactoring CSS Without Losing Your Mind - Harry Roberts @ WeAreDevelopers Conference 2017 - YouTube

Harry Roberts shares some tips to refactor CSS.

Rich Harris - Rethinking reactivity - YouTube

Rich Harris compares Svelte to React.

Take Back Your Web - Tantek Çelik - YouTube

Own your domain. Own your content. Own your social connections. Own your reading experience.

What's new in responsive design by Rachel Andrew - YouTube

Rachel Andrew explains the new CSS features to create responsive design.

Validator

Validate your code!

W3C HTML Validator

Accessible website starts with valid HTML. So, make sure that your website has valid HTML.

The W3C CSS Validation Service

Valid CSS is also important to ensure that the styling of your site works as expected.

W3C Feed Validation Service, for Atom and RSS

I use this tool to validate my RSS feed.

W3C Link Checker

Make sure that you have valid links on your site.

Schema Validator

Validate your schema data.

English

These tools can help me improve my writing in English.

Grammarly: Free Online Writing Assistant

This tool prevents me from doing typos in my writing.

DeepL Write: AI-powered writing companion

I use this to fix grammar issues and paraphrase sentences.

LanguageTool - Online Grammar, Style & Spell Checker

Another good grammar fixer and paraphraser.

Paraphrasing Tool - QuillBot AI

Another good paraphraser.

Wordtune | Your personal writing assistant & editor

I use this to paraphrase a short sentence.

Hemingway Editor

It makes my writing clear and bold by highlighting potential words that can be removed.

Lingva Translate

Alternative front-end for Google Translate, serving as a Free and Open Source translator with over a hundred languages available. I use this to translate words or sentences from Indonesian to English and vice versa.

Performance

Check and improve the performance of your website.

Lighthouse

I recommend using this as the first automatic testing tool for your site. It can catch some accessibility issues and do different types of tests too.

PageSpeed Insights

You can use this website to share with people about your Lighthouse score.

GTmetrix | Website Performance Testing and Monitoring

Test the performance of your website for free.

Free Website Speed Test | DebugBear

Test the performance of your website for free.

Yellow Lab Tools - Page Speed audit

This tool checks the performance of your website. It also analyzes the code of your website. I like the fact that it checks for bad CSS like duplicated selectors, duplicated properties, redundant selectors, and more.

Other tools

You can make your development process better and quicker by using these tools.

Squoosh

Optimize your images so that your users will not be frustrated with their cellular data usage.

Free Design Tool: Presentations, Video, Social Media | Canva

I use this to design the banners for my READMEs and favicons.

CloudConvert

I usually use this website to convert TTF (TrueType) to WOFF2 (Web Open Font Format 2).

SVGOMG - SVGO's Missing GUI

Optimize your SVG files by removing unnecessary code.

Favicon Generator for perfect icons on all browsers

I use this tool to generate favicons for this website.

RegExr: Learn, Build, & Test RegEx

Practice writing regular expression easily.

Test for modern Internet Standards like IPv6, DNSSEC, HTTPS, DMARC, STARTTLS and DANE.

Another test that you can run.

SSL Server Test (Powered by Qualys SSL Labs)

Test how good your website's SSL (Secure Sockets Layer).

Juicy Studio: Readability Test

Test how easy your content to be understood.

Meta Tags — Preview, Edit and Generate

Preview the social media card of your website.

Colorable

Compare two colors to see the contrast of them.

Free Broken Link Checking Tool - Dead Link Checker

You can check the links on your entire website for free and without creating an account.

Caninclude

If you get confused about whether anchor tag is valid to be a child element of the code element, then you can use this tool to verify that.

Can I use... Support tables for HTML5, CSS3, etc

Check the browser's compatibility with the features that you want to use.

Can I DevTools?

Check whether or not the features are available in the browser developer tools. For example, I can know that only the developer tool of Safari browser that can count CSS specificity of a selector.