A Website to learn how to build with CSS Grid Layout and Firefox DevTools
This website was built with Gatsby.
To run this locally, install dependencies with NPM and then:
npm run dev
npm run build
npm run deploy
Website to learn about CSS Grid Layout and CSS Grid Layout Panel in Firefox
Home Page: http://mozilladevelopers.github.io/playground
License: Mozilla Public License 2.0
A Website to learn how to build with CSS Grid Layout and Firefox DevTools
This website was built with Gatsby.
To run this locally, install dependencies with NPM and then:
npm run dev
npm run build
npm run deploy
I have found some issues with the "Introduction to Debugger" documentation. I will list the issues below.
The command given to open the debugger on windows is "shift + ctrl + s". This command should instead be "shift + ctrl + i".
The picture labeled "All of the tools available in the tools pane" is mislabeled. The top two panes should be listed as the toolbar and watch expressions.
If we use one of the three methods to look at the value of title, we can spot our issue. The value isn’t a string like we’d expect, but rather it is an entire object! If we hover over title and scroll through its different properties, we’ll find that we should have referenced the ‘value’ property of the object instead of the entire object itself. Fix line 14 and the app will work properly.
The documentation does not tell us how to fix the line, or provide the source files so that we can fix the function locally and test it out using Brackets or some other IDE.
If we hover over index (or number), we see that it is undefined. If we hover over dataset we’ll see that there is no number property. There is only index. A typo! The line should say:
Thank you!
For clarity, don't use self-closing divs:
This can be found on page 5
Can include campaign tracking, and makes it easier to update the link if necessary.
Hi !
I discover the website soon and after the first reading on the homepage, I was confusing because "Grid tracks" and "Grid column" use the same image.
I little enhancement will be to change the "Grid column" image by selecting the first column for example and not the one at the middle.
This is the base64 code of the image updated:
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBDb2x1bW48L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTMuMDAwMDAwLCAtMTQ4NC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxMzU5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iNjkiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIxMzUiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjY5IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU0IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMyIgZmlsbD0iI0ZGOTQwMCIgb3BhY2l0eT0iMC42IiB4PSIwIiB5PSIwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTIzIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjEzNSIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K
Thanks
https://mozilladevelopers.github.io/playground/debugger/
Before diving in, let’s take a look at the Debugger interface. Hit option + command + S on Mac or shift + ctrl + S on Windows to open the Debugger.
The first two labels in this image read source list pane
.
I think they need to be updated to read toolbar
and watch expressions
, respectively
Now that Dev Edition is 57, download links should point there instead of nightly.
"It will be the element that has thedisplay: grid or display: inline-grid property on it."
space between 'the' and display: grid
To add a fourth column that is 70px wide, write:
grid-template-columns: 150px 150px 70px;
Should be
grid-template-columns: 150px 150px 150px 70px;
The link in https://twitter.com/firefox/status/912475974687707136 leads to https://mozilladevelopers.github.io/playground/&utm_source=twitter&utm_medium=social&utm_campaign=DevelopersQ3&utm_content=A144_A252_C003300 which is a 404. I assume there were other query-string parameters to be prepended to the URL.
I would suggest deleting the Tweet campaign for this one, and make a new one with the URL containing ?utm_source=twitter
instead of &utm_source
.
Hi. I see a few issues and pull requests from good people. But no one review them. I can help with it!
@slightlyoffbeat maybe you know someone who can grant me access to review and merge pull requests?
A week ago I translated articles about debugger to Russian for our community. And I rechecked all information. It's almost still correct. So it's possible to fix these 8 issues quickly.
The MIT License file (LICENSE) hasn't been modified since Gatsby was installed so it's saying this project "belongs" to them.
You can find the new logo here: https://github.com/mozilla/protocol-assets/blob/master/logos/firefox/browser/developer/logo-2xl-high-res.png
Using Firefox Developer Edition on Ubuntu 16.04
Pages: /playground/*
Issue: If someone clicks inside the content div and then tries to scroll using keyboard, one cannot scroll as the .content
has overflow-y: scroll
. (See screenshot)
Quick fix: src/styles/layout/_layout.scss : .content { overflow-y: hidden; }
Also, the blank scrollbar doesn't look good either and is redundant.
Other than that, this works fine in Chrome but Firefox doesn't let scroll in parent container after focusing on scrolling child container with no more scroll space (Issue?)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.