WebDevPlayground https://webdevplayground.com Thoughts, tutorials, and experiments from WDP Sun, 08 Nov 2026 14:05:31 +0000 en-US hourly 1 https://wordpress.org/?v=7.1.4 https://webdevplayground.com//uploads/2026/09/site-icon-150x150.png WebDevPlayground https://webdevplayground.com 32 32 Creating a Mahjong Board Layout with JSON https://webdevplayground.com/tutorials/creating-a-mahjong-board-layout-with-json/ https://webdevplayground.com/tutorials/creating-a-mahjong-board-layout-with-json/#respond Sun, 08 Nov 2026 22:41:56 +0000 https://webdevplayground.com/?post_type=tutorial&p=378 Last time, we made some shiny new Mahjong tiles. We gave them some style, made them look nice, and even figured out how to slap a drawing on top. If you missed that, or just want to relive the magic, you can check out the “Creating empty Mahjong tiles with CSS and SVG” tutorial. This […]

The post Creating a Mahjong Board Layout with JSON first appeared on WebDevPlayground.

]]> https://webdevplayground.com/tutorials/creating-a-mahjong-board-layout-with-json/feed/ 0 How to: Scalable Mahjong Tiles with CSS and SVG https://webdevplayground.com/tutorials/creating-empty-mahjong-tiles-with-css-and-svg/ https://webdevplayground.com/tutorials/creating-empty-mahjong-tiles-with-css-and-svg/#respond Tue, 03 Nov 2026 01:49:32 +0000 https://webdevplayground.com/?post_type=tutorial&p=374 Some years ago, I wrote a tutorial on creating a Mahjong game in JavaScript. Back then, I used a single file to hold all of the images. A common way of cutting down HTTP requests. However, it made changing styles, sizes, and such very painful. Especially when the changes involved size. Shrinking the tiles? Easy, […]

The post How to: Scalable Mahjong Tiles with CSS and SVG first appeared on WebDevPlayground.

]]> https://webdevplayground.com/tutorials/creating-empty-mahjong-tiles-with-css-and-svg/feed/ 0 How To: Recoloring SVG backgrounds with CSS and JS https://webdevplayground.com/tutorials/recoloring-svg-backgrounds/ https://webdevplayground.com/tutorials/recoloring-svg-backgrounds/#respond Thu, 29 Oct 2026 20:07:35 +0000 https://webdevplayground.com/?post_type=tutorial&p=368 One of the main benefits of using Scalable Vector Graphics (SVG) is what its name suggests: Scalability. When working on a WebApp UI, we usually want: Responsive sizes Accessibility Using SVG for graphics can greatly improve responsiveness. With them, size really doesn’t matter. You can scale them up or down without hurting quality, and they […]

The post How To: Recoloring SVG backgrounds with CSS and JS first appeared on WebDevPlayground.

]]> https://webdevplayground.com/tutorials/recoloring-svg-backgrounds/feed/ 0 Accessibility: Making Games for Everyone https://webdevplayground.com/2026/10/accessibility-making-games-for-everyone/ https://webdevplayground.com/2026/10/accessibility-making-games-for-everyone/#respond Tue, 20 Oct 2026 00:43:34 +0000 https://webdevplayground.com/?p=345 I love gaming and making games. I enjoy focusing on the small details, adding playful animations, and seeing that satisfying moment when a board fits together. Sometimes I even end up with an unbeatable computer opponent and call it “advanced AI.” Still, even when everything works as planned, too many players can be left out. […]

The post Accessibility: Making Games for Everyone first appeared on WebDevPlayground.

]]> https://webdevplayground.com/2026/10/accessibility-making-games-for-everyone/feed/ 0 Create a Memory Game with JavaScript https://webdevplayground.com/tutorials/memory-game/ https://webdevplayground.com/tutorials/memory-game/#respond Sat, 17 Oct 2026 03:21:21 +0000 https://webdevplayground.com/?post_type=tutorial&p=338 Back in 2009, I built a memory game with jQuery and PHP. It also used a flipping plugin and Flash for sound, which is a pretty good time capsule but not a stack I would choose for a small browser game today. So, let’s give it a proper update. This version runs entirely in the […]

The post Create a Memory Game with JavaScript first appeared on WebDevPlayground.

]]> https://webdevplayground.com/tutorials/memory-game/feed/ 0 How To: Add AI to our jQuery Tic-Tac-Toe https://webdevplayground.com/tutorials/jquery-tic-tac-toe-with-ai/ https://webdevplayground.com/tutorials/jquery-tic-tac-toe-with-ai/#respond Wed, 14 Oct 2026 08:01:20 +0000 https://webdevplayground.com/?post_type=tutorial&p=327 Previously, in the tic-tac-toe series, we programmed a simple game of tic-tac-toe. The version we built reminded me of two-player games in the early ’90s, when friends sat at the same computer to play. However, since playing with a friend is not always possible, it’s time to add a computer opponent to the mix. At […]

The post How To: Add AI to our jQuery Tic-Tac-Toe first appeared on WebDevPlayground.

]]> https://webdevplayground.com/tutorials/jquery-tic-tac-toe-with-ai/feed/ 0 Why Bother With Semantic HTML? https://webdevplayground.com/2026/10/why-bother-with-semantic-html/ https://webdevplayground.com/2026/10/why-bother-with-semantic-html/#respond Tue, 13 Oct 2026 20:53:46 +0000 https://webdevplayground.com/?p=331 Not too long ago (12 years or so), there appeared a new HTML version. It contained lots of cool stuff. It introduced us to some new semantic elements as well. Well, if you are anything like me, you will not blindly jump on everything new just because of how cool it sounds. Plus, there are […]

The post Why Bother With Semantic HTML? first appeared on WebDevPlayground.

]]> https://webdevplayground.com/2026/10/why-bother-with-semantic-html/feed/ 0 Creating a Tic-Tac-Toe game with jQuery https://webdevplayground.com/tutorials/creating-a-tic-tac-toe-game-with-jquery/ https://webdevplayground.com/tutorials/creating-a-tic-tac-toe-game-with-jquery/#respond Sat, 10 Oct 2026 01:10:59 +0000 https://webdevplayground.com/?post_type=tutorial&p=316 Let’s build a modern tic-tac-toe game with jQuery, complete with player names, SVG tokens, adjustable board sizes, scorekeeping, and replay controls. Along the way, we’ll use semantic HTML, CSS Grid, and beginner-friendly JavaScript to handle turns, wins, and draws.

The post Creating a Tic-Tac-Toe game with jQuery first appeared on WebDevPlayground.

]]> https://webdevplayground.com/tutorials/creating-a-tic-tac-toe-game-with-jquery/feed/ 0 Welcome to Webdev Playground https://webdevplayground.com/2009/04/welcome-to-webdev-playground/ https://webdevplayground.com/2009/04/welcome-to-webdev-playground/#comments Fri, 03 Apr 2009 22:19:13 +0000 http://www.webdevplayground.com/?p=3 First, let me start by explaining the purpose of this blog. I usually think that the best time to explain why something is starting is at the beginning… so here goes. There are a lot of sites, blogs, and portals  around that teach and explain how to do this or that in web development, so […]

The post Welcome to Webdev Playground first appeared on WebDevPlayground.

]]> https://webdevplayground.com/2009/04/welcome-to-webdev-playground/feed/ 1