CodeSpud

Using Container Queries to Make a News Layout

February 24, 2023csslayoutfrontend

Think of media queries as a bottle filled with different liquids that don’t mix, like oil and water. The shape and size of the container…

Automatically generate skip buttons to improve accessibility

February 17, 2023accessibilityjavascriptfrontend

Another common accessibility tool is the skip button. It comes in different forms. It would sometimes be smartly included in the design or hidden until needed.

CSS Snippets I Use 90% of The Time - Part 2

February 09, 2023csssnippetsUX

This is part 2 of CSS snippets I used 90% of the time post. As promised this is second part of CSS styles I commonly used with my projects. If you are going to think of a rule I’d say this is my 80/20 rule for CSS.

Five common Javascript mistakes I am guilty of

February 02, 2023javascripterrorweb-development

Errors in code are normal. That is why we have a whole branch of the IT industry dedicated to quality assurance and testing. Javascript is the easiest programming language to learn, but it is also the easiest to get wrong. Javascript is a very forgiving programming language. As a result, Javascript code can be prone to errors.

CSS Snippets I Use 90% of The Time - Part 1

January 28, 2023csssnippetsaccessibility

I have snippets of code I return to whenever I find patterns in a design. It is one of those efficiency hacks I’ve adopted as a programmer. I have quite a collection. Gathered working on websites in different industries. Although the size and theme of these websites vary, I can still count on some basic UI patterns.

Top three things to do for better keyboard and screenreader navigation

January 20, 2023accessibilityUXfrontend

Improving accessibility is an exercise in empathy. We put ourselves in other people’s shoes and imagine how we can do a specific task. Tasks like going up a flight of stairs, knowing when to cross a street, or how to consume a website.

Newbie's Guide to Learning Vue.js

January 14, 2023vuefrontendweb-development

Part of my new year resolution for 2023 is to learn at least 3 new front-end frameworks. One of these frameworks I intend to dive deeper into is Vue.js. Every time I want to learn something new I try to plan first. A very quick to-do list related to the subject. I know there’s a lot of great guides out there about Vue.js.

Fix accessibility using focus-within

January 08, 2023accessibilitycssfrontend

A few issues I found recently for clients were related to accessibility. A few perfectly working user interfaces were not keyboard accessible. Not because they are custom controls nor because the controls were not tabable.

Programmer's New Year Resolution

December 31, 2022web-developmentpersonalfrontend

I am the most undisciplined person I know. I make resolutions every year - and every year - I fall short. But I am stubborn too. So this year, I have decided to be a better programmer and work on my journey in this blog. I am starting with my new year’s resolution as a front-end developer.

React Custom button: a study on accessibility

December 19, 2022web-developmentreactjsaccessibility

React and accessibility I love ReactJs. I learned late in my career as there were not a lot of opportunities to do so. When I finally found a suitable situation to explore ReactJs for a previous employer. I jumped on it and picked it up quickly. It was weird in the beginning but it became quite natural in the end. Now I mainly work with ReactJS in most of my projects.

Five Web Accessibility Extensions for Visual Studio Code

December 15, 2022accessibilitytoolsproductivity

Developing with accessibility in mind requires knowledge of WCAG rules and good techniques. These techniques boils down to remembering good accessbility patterns in code. Linters are good at discerning less ideal patterns and provide hints on how to fix them. Before I used to think linters are optional for developers. But now I don’t think I can work without them. Using a good IDE linter will help making sure your code follows accessibility best practices and in turn make you more productive.

Five simple steps to improve website accessibility

December 10, 2022web-developmenthtmlbest-practice

Accessibility is very important. It ensures that anything we make is available to a greater number of people. It is not just about people…

Working with Date and Time Input

December 09, 2022web-developmenthtmlbest-practice

I remember using JqueryUI’s datepicker. It was my go-to calendar widget in the past. It was great. I just drop an input box give it an “id” and then run a function. You get a great-looking calendar picker for your forms. It was a great bit of software engineering. I’ve used it in a lot of my old projects and clients were impressed.

Rock-Paper-Scissors-Lizard-Spock Game

November 20, 2022javascriptuianimation

I am a big Big Bang Theory fan. So is my wife. Her absolute favorite character is Sheldon Cooper. In one of the episodes Sheldon proposed an improved version of the rock-paper-scissors game. This version extends the possible moves to five(5). The additional two options would increase the possibility of win chances as it minimizes the chance of both players picking the same move.

Creating My Animated Bottom Bar Experiment

November 19, 2022javascriptcssui

I wanted to see how much we can do with CSS transitions. No keyframe animations at all. Although you would have more control over the…

By @codespud  
DISCLAIMER This is my personal weblog and learning tool. The content within it is exactly that – personal. The views and opinions expressed on the posts and the comments I make on this Blog represent my own and not those of people, institutions or organisations I am affiliated with unless stated explicitly. My Blog is not affiliated with, neither does it represent the views, position or attitudes of my employer, their clients, or any of their affiliated companies.