flukeout/css-diner

CSS Diner

Welcome to CSS Diner

It's a fun game to learn and practice CSS selectors.

To play, visit flukeout.github.io or cssdiner.com

Change Log

Aug 25,2016

• Added Twitter, Facebook and Email share actions
  • Tracking clicks with GA Events
• Made the level menu and editor area scroll independently
  • Using custom jQuery scroll library

Aug 18,2016

• Started using cssdiner.com to redirect to flukeout.github.io

Aug 12,2016

• Added checkmarks to completed levels in level menu and header

Aug 4,2016

• Began tracking progress and correct guesses with GA Events

Filing issues and PRs

Please file issues and PRs in the css-diner repo.

Repo structure

Here's the repo structure, it's a bit confusing...

• Currently, all of the working code (including issues, PRs and in-progress branches) is hosted in the css-diner repo
  • The lastest version of the code is on the develop branch
• The live version is published from the flukeout.github.io repo
  • Live version lives on the master branch

Deploying

This is more of a note to myself in case I forget, to deploy the latest version, I'll have to push to the master branch on the flukeout.github.io repo from the latest develop branch.

Roadmap and Status

Potential Features & Improvements

• Lots of people have trouble with level 19, how should I address this?
• Create levels for attribute selectors
  • Will probably add attributes like customer='bob' and place a little nametag by those dishes
  • Also some great ideas in this issue
• Figure out how to tackle the .table element
  • Including it in the selector string makes the selectors invalid, but it shouldn't
• Investigate the order of stacked oranges in the markup, some users think it's counter intuitive
• Block attempts to use comma between selectors
• Only pass each level if that level's selector is used
• Make it easier to navigate between levels
• Number all of the levels in the menu
• Add UI to Tweet about finishing all of the levels
• Add additional challenges per Selector
  • Some repetition per level would be good

Special Thanks

• @k88hudson
• @antlam
• @smashman2004

css-diner's Issues

User Feedback - Dhaiaka

Have maybe two modes like learn / puzzle.
If someone's learning, they pretty much need the hints right away.
So - lead with the rule / concept, then have them execute it a few times.

Make it more obvious what to do when you get there!

Issue a badge if you win?

Developer feedback - Tests for javascript & views idea

Might be ideal to add tests to this.

I realise this is a bit of a hassle to do, but it can put people off introducing new bugs. I mean fixes ;)

Will attempt to write a few specs later (tomorrow evening seems likely) for you!

User Feedback - Antlam

Thought there were only 5 levels becuse of the example text.
Tried to hit the enter button with the mouse.

Selector - :first-of-type

.plate:first-of-type

User feedback - Suj

Wasn't sure if it wasn't working or something was going wrong.
Need to figure out more about that.
Oh yeah - didn't know to hit the enter button.

Indicate better in the markup what is being targeted?

Fix level 15 weird selector working :first-childorange

How about translations?

If you have a plan to provide translations, please give me a notice when you start doing it. 😄

Fix the 24 errors of the site's CSS

Some browsers have legitimate problems to display the page. For instance, the first rule of the current CSS is box-sixing: border-box; which contains an obvious typo. Another dubious behavior is using some vendor extensions without the official rules, ie @-webkit-keyframes without @keyframes.

I suggest using the W3C CSS Validator at http://jigsaw.w3.org/css-validator/ and fixing each of the 24 errors it detects.

Give the input box more space around the enter key.

Fix the zindex crap on the level menu so it doesn't overlap weird

Add a tweet this after completing the game

Add back enter button or something for the new layout

Selector - :not

• .serving :not(.orange)
• .bento :not(:first-child)

Add back the enter button to the new layout (or something about it)

Make the 'enter' button mouse clickable

Selector - <tagname>

div sucks, maybe use and ?.. sucks because

doesnt work due to default styles, but maybe we can overwrite it

table-edge starts out too wide often, not on localhost, but when hosted - why!

Level 17: #fancy>apple,.table>pickle doesn't work

Note down all of sabrina's input in here.

Add a way to view all the markup

Maybe just a hover / popover? Or togglable PRE tag with all the markup

Syntax div not updating between levels

Most notably between level 12, 13 and 14.

See this gif.

If I select the text in that div, it updates, however.

I'm not sure if this is an issue on your end (I checked everything over and nothing sticks out. It also works in a local version.)

It could be an issue with Chrome in general...

Level 13: Please mention having the same parent

Select every pickle to the right of the bento

I was confused. I thought A ~ B means select every element that follows A. But, it means only those elements which have the same parent as A and the elements follow A.

Google fonts slow to load

Spinner keeps on spinnin

User Feedback - div.table didn't work when used as a selector

Figure out how to handle this..
i can probably strip 'div.table' and '.table' and 'div' from the rule and explain that it's scoped there already!

Or let them do it??

User feedback - Sam

Didn't know how to 'try' a selector and didn't realize right away you are supposed to type it in there.

Make levels 15-17 harder

So you can't use use the selector by itself.

Make it harder to rely on the nth-child selector

Maybe have more plates and ask for stuff that would select two items?
Or have two tables where a rule applies in different places?

Ambiguous hamburger menu icon is ambiguous

At first glance it seems to suggests that it would close the entire visible panel. Upon clicking it, it actually reveals the levels navigation.

Maybe another icon should be used? Perhaps a left pointing arrow that switches to pointing right when active, or simple text (might make more sense if you implement arrows next to the "Level 1 of 20" text).

Add code highlighting to the example html

:nth-last-child(*) requires many returns

Example of issue here - http://instagram.com/p/l9UuMyCzwJ/

Could be a browser bug perhaps? Did not investigate this much! Found on Chrome Version 33.0.1750.152

Keep track of last level beaten!

If you refresh, start at last level completed.
Also need a way to start from scratch.

Selector - #id

Can add a fancy plate

Can't get past Level 1, not allowing me to hit Enter

I can't pass level 1 even though I've entered everything in correctly and it won't allow me to hit enter.

Selector - [attribute=blam]

Add some kind of attribute stuff too.
.plate[hot='yes'] etc?

Highlight fruit when hovered in the HTML markup.

Add left / right arrows to switch between levels.

Fix level 9 - bento, plate vs plate,bento

need to do differently for chcking win con

Selector - Tricky Stuff

List of ideas for tricky selector combos

• .serving:not(:empty)

Certain bad selectors don't shake the input or anything.

User Feedback - Damien

Not sure what to do on the first level, thought maybe he had to type a rule to 'display:none' the plate or something like that.

I could just say "select the plate"

Level 4 - Include an example that is nested deeper (A B C) not just (A B)

Up arrow in input box should bring up last typed command.

Or go through the list of them?
So we could keep an array of submitted commands and just iterate over them.

User feedback - Ben

Tried to click the Enter button with his god-damn mouse.

Easier way to navigate between levels

So you can jump back and forth and look up what you learned.

User Feedback - Alan

Add a timer for experienced people! To make it a challenge

Win 'slide' animation doesn't work anymore!

Review feedback

http://discoursettw.mofoprod.net/t/feedback-on-css-diner/8/3