DEV Community: Charanjit Chana

Team Sheets, helping you organise team games with just a swipe

Charanjit Chana — Tue, 26 Aug 2025 14:55:00 +0000

🎉 Last week I launched my new app Team Sheets in the App Store.

Team Sheets actually started as a spreadsheet I used to help picked balanced teams for my weekly game of 5-a-side football. My son saw what I was doing and liked to get involved, even though he didn't know who any of the people involved were, but it was a fun exercise in trying to level out varied abilities from a pool of players that changed weekly.

The process was ultimately pretty cumbersome and required more effort than it was probably worth And then it hit me that it would be a lot simpler if I could just swipe to assign a player to a team!

Team Sheets uses CloudKit to manage data across devices, but is personal to you (export/import coming in the future) and is built using SwiftUI.

Once you have a game and players set up in Team Sheets, you really can just manage which side they belong to with just a swipe! You can optionally rate players and then use that to help balance the teams based on ability with a helpful indicator. If you want to track scores, you can do that in the app and it will remember the line ups too.

It's not limited to football/soccer either, although that was the inspiration, there are more than 20 sports supported. If you play 1v1 or racquet sports you can still track games and scores.

The app is free and available in the App Store now: https://apps.apple.com/us/app/team-sheets/id6748604773

I'd love any feedback you might have and I already have a roadmap of more features and widgets I'd like to bring it that I’ll be getting to once iOS 26 is out in September.

A brief look at the CSS max() function

Charanjit Chana — Fri, 16 Jun 2023 15:22:48 +0000

CSS' min(), minmax() and max() functions are still taking me some time to get my head around. Mostly because I'm not using them yet but I'm trying to look at them as often as possible in the hope that they click. Their names are counterintuitive to me, but they're usefulness outlays that... I think.

width: max(50vw, 800px);

In this example, the item will be at least 800px wide, but will grow to be 50vw wide. Just like with the min() function, the two properties work together to define how wide an element would be. At some point, 800px an 50vw are the same. With min() we would see the image grow until it hits that point, with max() it is a static size until then. After, it's start growing to fill us much space as possible. CSS treats 1vw as 16px (800 / 50) in this example which means that 100vw would be 1600px.

Click through to the demo on Codepen and resize your browser. You'll see the image is always at least 800px wide and never less than half the size (50vw).

*Small update on using min() and max() in CSS

Since this was originally published on my blog, I have started to use the functions. I think I understand how the work now, although I have to look up which does which each time because the names are confusing to me!

Why I can't wait for the :has() pseudo-class in CSS

Charanjit Chana — Tue, 28 Sep 2021 11:19:11 +0000

This past week I had a great idea for a tiny PWA that would only use JavaScript to make sure it worked offline and nothing more. In the future, I could make use of localStorage to remember preferences, but beyond that there would be no need at all.

I finally carved out some time after a few days mulling over the idea and was determined to make it work with the :has() pseudo-class but it turns out that browser support is non-existent! I've seen it talked about for at least a year, maybe more so had assumed it would be safe to use.

I came to the realisation yesterday that I should give up on the CSS-only approach, for now. I can revisit once browser support starts ramping up and strip out any JavaScript that's no longer required.

Why I can't wait for :has() to come to CSS

The reason I can't wait for the :has() pseudo-class is that it's effectively a parent selector for CSS. I've been working professionally with CSS since 2005 and it's something I've wanted for the past 16 years at least. In the days before heavy JavaScript pages where things were just progressively enhanced, adding classes dynamically as you created the HTML was easy enough – even if it meant more logic than was ideal.

Then came along jQuery with its .parent() function that meant we could progressively enhance the page rather than having to fetch from the server every time. In reality, this meant twice the logic in some cases. Once for the canonical server-side rendered pages and another for how it should be handled in JavaScript.

When we finally get our hands on :has(), no longer will we need helper classes or will we need to specify which item is 'active' at a higher level than the developer wants it to be.

Here's an example of some HTML and where our classes are required right now. We have a menu where a sub-item is selected which needs to be highlighted, but I'd also like to highlight the parent item it belongs too but that also means adding a class:

<div>
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#" class="active">Item 2</a>
            <ul>
                <li><a href="#" class="active">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
             </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</div>

Once we get :has() in CSS though, our HTML changes a little and the parent no longer needs an explicit class to show that it's active:

<div>
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul>
                <li><a href="#" class="active">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
             </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</div>

With just some CSS, we can now do the following to determine that the 'parent' has a child that meets the criteria:

li:has(.active) > a {
    font-weight: bold;
}

It really would be that simple, now the parent of an element with the class "active" is targeted with its direct descendent styled.

I would personally prefer 'contains' or 'parent-of' instead of has for the pseudo-class name but I won't complain too much! This is yet another huge step in the right direction.

Goodbye, Internet Explorer. You will not be missed.

Charanjit Chana — Thu, 27 May 2021 14:48:55 +0000

My first draft of this post focused on all of the good that followed IE6 in the world of web development but I think it’s worth focusing on why we're so happy to be saying goodbye to my nemesis for a lot of the last 20 years. Later this year support for Internet Explorer officially comes to an end and in mid-2022 it will be retired completely.

From 3-pixel bugs, to different implementations and interpretations of the CSS specs, the end of internet explorer couldn’t come soon enough. Never heard of the 3-pixel bug? If you have access to IE 11, then go here and use emulation to pretend you're in IE5 (IE6 is not available for some reason) and you'll see a three pixel indent of the first paragraph in the green box. Maddening.

I had the misfortune to not only have to support IE6 in my development career, but also IE5.5 and even Internet Explorer for Mac too. Internet Explorer for Mac. Truly trying times.

Microsoft eventually moved onto Internet Explorer 7 but the improvements were minimal. IEs 8, 9, and 10 were not much better and even now 11 is painfully slow. Over the past 5 years, I've lost count of how many times I have been asked to look into performance issues and it turns out it's the browser itself struggling. The code itself is good enough for everyone else, the user's hardware rarely an issue and the APIs themselves performant. Every other browser coped without any issues.

Edge is a clear improvement on the browser experience for Windows users and long overdue. Built on top of Chromium, the dev tools are there and so are all of the performance benefits that come with things like the V8 JavaScript engine.

Goodbye, Internet Explorer. You will not be missed.

🎂 1 Year of SITEJOY 🎉

Charanjit Chana — Thu, 20 May 2021 08:36:46 +0000

I waited until a month after it's launch before blogging about SITEJOY last year. It was a project I had thought about on and off for about a decade, so it was really satisfying to see it go live.

Over 700 sites in a year

By the time this post is published, 775 sites will have been posted to the site. That's a huge number considering I thought it would be really hard for modern websites to meet given the criteria I had set for submissions.

In truth, at least 90% of sites I've discovered my self. There have been a few submission, but as the gallery grows I'm sure I'll see more over time.

I fully expected to be in the low hundreds at best, so I've been blown away with how many sites make the effort to build fast and responsive websites. But that hides the reality of how much work there is behind the scenes to create the content for SITEJOY. At least 50% of sites I come across take an age to load so don't even make it into the queue for review. Another 10% don't work on mobile, so again they're excluded.

That remaining 40% then has roughly a 50/50 chance of making the criteria. Right now, I've reviewed exactly 1,550 sites and only 775 have been accepted. Take into account the rejections I've already mentioned, then that means we're looking at 775 out of 3,875 sites worthy of inclusion. That's a ratio of 5:1 (or 4 rejections to every 1 site that is published). That's higher than I thought it might be but pretty damning for the world of front-end development.

What's next for SITEJOY?

I'm not far of the 1,000 mark and I'll make that in the the next 4-5 months I think.

Beyond building on the quantity of sites, I want to work on the data behind the scenes a bit better. I really need to create a "100 Club" area for those sites that achieve a 100 score for both desktop and mobile in Google's Lighthouse/Pagespeed tests.

It would be nice to do the same for sites that work without JavaScript and maybe even for those that actually have 0kb of JavaScript.

Lastly, the two bits I've been very lax on are categorising each site. I have the ability to choose a category and the primary colours in use. The latter just became way too time consuming, but I'm going to change it from exact values to ballpark. In stead of specifying the exact hex code, I'll just mark it as black/red/blue or whatever the correct value is.

For actual categorisation, around half of the sites are done, but I'm thinking of changing this so that each site can only have one category rather than allowing multiple. I think that's what's caused me the biggest pain here. It's a two step process, and optional, so it doesn't get take care of enough.

I'll also be trying to factor in more sites and apps around all of the great portfolios I've featured. Portfolios are much easier to find and I've found that I can gauge their suitability quite quickly but they don't always tick the 'designed well' box. But I am working on it.

Overall, it's been a really interesting year with SITEJOY. As I said, it's was a decade long goal of mine to share a gallery of fast & responsive websites. I'm really proud of the site and service I've built up.

I'm also quite proud of the automations I built up around sharing to Instagram. I'll share my process for creating the backgrounds in a future post, but @sitejoydev is well worth a follow if you're looking for web design inspiration.

If you have a site you would like me to consider, please get in touch via Twitter and I'd be happy to give your site a look.

3 things I didn't know SCSS / SASS could do

Charanjit Chana — Thu, 13 May 2021 09:14:45 +0000

While I've spent over a decade working with LESS/SCSS/SASS, I never really pushed it beyond the basics. Don't get me wrong, the basics are enough of a reason to use the pre-processors. For me, it makes the code more readable and maintainable.

I've come across a variety of posts recently that have highlighted things that SASS can do that I hadn't realised.

1. Nesting properties

By nesting properties, you can save a few bytes, but more importantly it's another layer of organisation you can sprinkle throughout your CSS.

2. Complex loops

Last week I talked about updating SkeletonCSS and introducing a map of colours. This has turned out to be very useful, so I'm not new to maps and loops themselves but I hadn't thought about pushing what they could do until this past week.

Thanks to the maps I've built up, it would actually be really easy to introduce dark mode by just flipping the map when creating CSS variables. You may look at my map and wonder why I started at -3 instead of 0. For me, it makes more sense to keep 0 as the primary shade of the colour and then the more negative you get, the darker the shade. The opposite is true too, the higher the number, the lighter the shade.

What I first started looking into reversing the map, this seemed like a world of pain and I thought I was going to have to switch it up but after a quick scribble on a piece of paper I found the formulas that make it work for me.

3. Parent selectors

Now, I would argue a parent selector would selecting the parent of the current element... but that's not possible in CSS.

Thanks to SASS however, you can target the parent element which is another thing that aids organisation in your CSS.

I haven't used this in vein but I can see how it simplifies what you're writing and is another way to reduce the number of declarations you need. The best way to understand the example above, is that the nav item may be included multiple times and have a default style except when it's in a header. Instead of explicitly creating a new block for that scenario, you can now drive it from within the nested properties of the nav element itself.

Long overdue, but I'm going to read the docs for SASS in all it's glory and I found this great cheat sheet for SASS. I've always enjoyed working with CSS and HTML and SASS/SCSS is now firmly at the top of the list of programming languages I love to use.

I ️ SASS but am I making the most of it?

Charanjit Chana — Tue, 11 May 2021 16:05:22 +0000

SASS / SCSS have been in my arsenal for over a decade but I don't feel like I've ever taken full advantage of what it has to offer.

SASS is what it always felt like CSS should have been. It makes your code more flexible, reusable and manageable. I've been using SASS / LESS in some for well over a decade but in reality I've never really pushed what it can do.

As part of some prototyping at my last job I did take advantage of breaking the CSS down into smaller files which made it a lot more manageable. Other than that, I don't recall many times when I've even taken it that far.

The things I love about SASS

SASS Variables

If this is all that SASS offered, it would still be a good step up from plain old CSS. Create your variable and when you need to change the value it changes everywhere. With CSS (before CSS variables), you would do a lot of searching or making use of your IDE's find and replace functions.

Using variables in your calc() functions is a little complicated as you need to wrap them with #{$variableName}. I've only really taken the time to understand CSS variables, but they're still an afterthought for me at this point.

Nesting

So variables are great, but nesting is what I love most about SASS. It's much easier to keep track of where and how things are styled in your CSS file. Variables and nesting are the two bits of SASS I use without hestiation.

RGBA

I use the rgba() property a lot these days and recently found out you can pass in keywords or variables. SASS takes those and converts them into RGB values.

color: rgba(silver, .5); //rgba(192, 192, 192, .05)

Things in SASS I need to take more advantage of

Nested media queries

I recently found out that you could nest media queries in SASS but I haven't really taken advantage of it very often. If I hadn't figured out a more efficient way to take care of dark mode with CSS variables and I was still relying on SASS variables then it would be a no brainer.

Having said that, it could make managing things like responsive breakpoints a little easier to track. I'm not sure, but perhaps something I'll investigate when I have some time.

Mixins

With a bit more thought, I'm sure I could find some really good uses for mixins but a lot of the CSS I've written over the past few years is simple enough to have avoided them. In reality, I pretty much forgot about them until I saw this video from Kevin Powell:

As part of another project I'm working on, I'm going to refactor the CSS and see where I can make use of some mixins. Once that's complete, I'm going to look at the possibility of re-engineering 1 Thing A Week for consistency and as part of that I'll do the same with the CSS. This site has one of the largest CSS files I've created so some love and attention will go a long way.

Are there other aspects of SASS I should be looking at?

🎉 My daughter built her first website 🦄

Charanjit Chana — Fri, 05 Mar 2021 10:42:39 +0000

Just over a week ago, I asked my daughter if she'd be interested in writing some code and building a simple web page. We've played around with a few games on Code.org a few times as part of her homework during lockdown but never really built something from scratch.

// Detect dark theme var iframe = document.getElementById('tweet-1361657465427927041-865'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1361657465427927041&theme=dark" }

I wasn't sure how it would work between us, I like mentoring as a side affect of what I do at work, but teaching isn't really my calling. But we gave it a shot and actually came up with something fun over in a little over an hour overall.

Starting with the basics

We kicked off with some HTML. I explained very loosely how tags worked and where certain tags sat.

Once we'd got through that, she was eager to get into building something and she was amazed that she could write out a few things and then see them in the browser. We literally started with a button that had no display value. She was unimpressed... until we added a display value. In our second session, we came back and structured the page a little better, but this was a great start although a button that does nothing will only impress someone for so long!

So we moved on to some basic JavaScript, and introduced her to the alert() function. That was a great step as she got it pretty quickly: "I can make a button do something when you click it".

Again, how long is that actually impressive for? The answer is a few minutes at best for a 7 year old...

So we brought in prompts. Now she could ask a question and remember the answer... but why would we do this? Oh wait, we can add the value in to our alert!

This was a bit that really impressed her and helped to keep her attention. We probably entered a value into the prompt 10 times, or more, as we tested.

In our second session, as well as a more structured page, we introduced some CSS, utf-8 characters (unicorns, of course) and introduced a second prompt that would influence how the page looks.

It was a really fun exercise and something I've thought about for years. I much prefer building dumb websites and I think that helps to make it easier to introduce some of these concepts. Everything else can wait until there's some real interest in the topic.

The code

I've uploaded what we've done to GitHub, you can find it at cchana/diya2021, feel free to browse through the code and share it with your young ones. We'd love to see what others do and maybe even some pull requests.

Above is a screenshot of the page after the initial load in all of its purple glory. If you want to see it in action and give it a go, head over to diya2021.1thingaweek.com.

The preview…

Charanjit Chana — Thu, 25 Feb 2021 22:47:56 +0000

Wayfinder is something I’ve had in mind for years. This past week I finally bit the bullet and got to work building it.

Simply put, it’s a routing framework for PHP. It takes the URL and routes it to your code. I rarely need anything other than routing, so that’s Wayfinder’s primary purpose. It will grow a little more than that, but not too much.

The documentation is a work in progress, but it’s also an example of how it works. There’s still lots to do but I’m really pleased with these first steps on the Wayfinder journey.

How to build a pure CSS accordion

Charanjit Chana — Mon, 08 Feb 2021 09:59:48 +0000

I had this topic in mind, but planned to build it using CSS and vanilla JS as follow up to an article from a few months ago where I built pure CSS tabs and carousels. Then this past week I came across an article about pure CSS tabs making use of the :target pseudo class and my mind is blown.

The demo

Jumping straight into it, here's the demo with the markup and SCSS I used to create the simple layout:

The explanation

The important bit is making use the of the :target pseudo-class. Here's a dt element containing a link that takes you to the element with the id #first.

<dt id="first"><a href="#first">First heading</a></dt>

In my case there's effectively one and the same thing. The parent element has the ID we're looking for but this could be anywhere on the page. If this was a carousel, perfect for highlighting the current tab!

As for the CSS, we simply take the highlighted dt and reveal the adjacent dd which contains the content for that part of the accordion.

&:target {
    + dd {
        display: block;
    }
}

My demo is a little more complicated because I've added rounded borders and tried to cater for various browser quirks when it comes to the border-radius property. Browser support is pretty good for the :target pseudo-class so not too much to worry about there.

The one drawback I've found is that there's no obvious way to do this with just CSS. With a bit of JavaScript you could remove the target from the URL but in that case I'd not bother with a pure CSS solution and just do it with a minimal amount of vanilla JavaScript.

I also haven't catered for the scenario where you would want to allow for the entire accordion to be open or to have a default open. The later could be solved with a bit of additional CSS, but the former would require JavaScript again as far as I can see.

CSS FTW!

My #dohackathon submission: The Neptunes, an interactive archive

Charanjit Chana — Mon, 04 Jan 2021 09:07:47 +0000

What I built

A searchable archive (or catalog) of every song that has been produced by the music production duo, The Neptunes.

Category Submission:

Random Roulette

App Link

https://theneptunes.1thingaweek.com or http://neptunes-rktxp.ondigitalocean.app

Screenshots

Description

Songs are grouped by album, then year and lastly by decade. You can search by artist, album or song and choose to show them in either chronological or reverse-chronological order. Oh and you can filter by decade to reduce the number of results on the page.

While I had originally intended to build the project in PHP enhanced with JavaScript, a database would have been overkill so I compiled the data into a JSON file. At that point PHP didn’t make much sense anymore.

I actually kicked off the project with Vue in mind. I spent a few hours fiddling but came to the conclusion that was overkill too. After ditching the framework and adopting template literals (thanks ibz786), I ended up with a file containing all of the logic in around 350 lines (220 without comments) of code which I’m very proud of.

I'll probably look at refactoring it fairly soon because it got a bit out of shape towards the end but it's not going to grow much beyond what it is now.

The Lighthouse scores for both mobile and desktop are 100/100 which is something I'm pleased to see!

Safari doesn’t yet support lazy loading of images, so you might have a slightly better experience in other browsers although can't say I've seen a noticeable difference.

Browser support is not up to my usual standard and where I’ve used CSS grid there are no fallbacks, although by pure luck it degrades fairly gracefully. I decided to work with modern JS as a learning exercise and because there are a lot of things I need to loop through.

I used CodeKit to take care of the basic minification and SASS compilation. If id stuck with Vue, I might have looked to other tools to take this on. I’ve basically avoided using any external libraries and I’m happy with that choice. It’s minimal in its appearance and in its approach.

At one point I considered having a light and dark mode. Easy enough to implement but a default dark theme just seemed like the right choice given their space theme so I stuck with it.

PWA

Not a proper PWA as there's no serviceworker in place (yet), but you can install it to your home screen and use it as a full screen app as long as you have an active internet connection.

Link to Source Code

https://github.com/cchana/neptunes

While I built the site to be able to find any song or album The Neptunes had worked on, you can fork and customise it for any artist or medium that can be represented as a timeline.

Permissive License

MIT License

Background

The Neptunes ‘sound’ was behind a lot of the music I was into as a teen and I’ve listened to music produced by The Neptunes and Pharrell Williams a lot over the past 20 years or so.

Like a lot of my projects, I’d Hebron thinking about it for a long time but didn’t know where or how to start. The #dohackathon came around at the right time and gave me the push I needed to jump in.

How I built it

I’ve never really brought into these types of platforms where you can easily deploy your code. I’ve always had a SVN repository behind projects and a LAMP server of some sort to host them on. It’s never been in my interest to do it any other way.

I started from scratch which was actually fun to do. It’s not a complex project, but one that got me discovering aspects of web development I’ve either forgotten about or not had a need to look into.

Additional Resources/Info

Apart from using the GitHub desktop app for Mac, CodeKit and the Atom IDE, there wasn't much else to it. I used Trello as a very basic task manager and both dev.to and StackOverflow to get a bit of help.

As usual, less is more

Charanjit Chana — Sat, 02 Jan 2021 21:24:31 +0000

I spent an hour today tweaking how the layout works. I had somehow made margins and paddings behave slightly differently for mobile and desktop without actually overriding anything. To be honest I’m still not sure how I did it but after taking it back to basics, it now scales correctly.

I’ve now noticed an issue with searching on mobile Safari after reworking some logic around jumping to page anchors. The jist of it is that padding: fixed is ignored when the virtual keyboard is shown. Annoying but nothing I can do about it in CSS it seems. Maybe I’ll reevaluate how the header works, but as always you can see my progress so far here: https://theneptunes.1thingaweek.com/