CSSGrid is Live on the Main Page
Happy to report that CSSGrid is Live on the Main Map Page.
It was a long journey.
First I had to learn about CSS Grid and evaluate if it would be a good solution for Mapertunity or not.
So I made a prototype page and did some experimenting to both learn about CSS Grid and how to us it to create a flexible page User Interface.
That worked out ok but there was still some issues.
The main driver of wanting to go with CSS Grid was the shift to Node.js and React.js as a development technology for Mapertunity. I think React.js will allow Mapertunity to add new features based on the page “Component” idea.
But if React is good at creating reusable page Components, the question that all the training videos danced around on YouTube was how does React.js decide where to place each Component on the page?
What is the page layout strategy or mechanism that React uses? No one really explained it or at best they danced around how to do that. The training videos all focused on how to create stand alone React components but to actually integrate those components into a live webpage, well so far, I have not found a React video on how it is actually done.
So I had to invent my own method and that method involves using CSSGrid as the layout mechanism and within that we target the react.js components and then we let the browser figure out the layout based on component location within the CSS GRid.
I don’t know if it is going to work out in the long run, as this is all new to me, but in either case, I have already learned about CSS Grid and gotten myself up to speed on that technology.
To use CSS Grid I also had to dream up a naming strategy for the CSS Grid / React Component naming strategy.
The naming strategy needed to be scalable, to say 50,000 components, to be on par with the number of components that people say Facebook has, as well as the naming strategy needed to allow for easy location identification within the whole website.
I thought about using an “Area” type naming strategy but that was different for the accepted names the technologies already use, so in the end I felt it best to stay with “Content” and “Component” as the major naming elements.
It is still not a perfect naming strategy because it breaks down if the component nesting is more than a couple levels deep. I’m thinking it is similar to the nested naming requirements for a TOC, Table of Contents. I was planning to look at MS Word or Wikipedia to see how very deep nesting is handled. I think a Table of Contents is similar to my css grid naming strategy problem. I’m good at naming strategies. I will dream up the best solution eventually then convert the whole site over to it.
I also used a “Page Name” as part of the naming strategy.
So the naming strategy for CSSGrid is a kind of website Address location naming strategy.
Now the Mapertunity Map page is a “Technology Rich” or “Technology Dense” page. It may not look like it but there thousands of requirements coded into that 1 page. It looks simple and that has always been my design goal to make it look simple, but if you really look under the hood, you will find a complex web of technology and new algorithms, that I dreamed all up usually with a pencil and paper, all working together to be able to serve up a job board map with Global Scope.
So I got Grid going. I had it going a few days ago but I really wanted to put some polish and tweeks on the basic page elements because those will get cloned and scaled out for the mobile users.
I don’t want to clone issues and then have to go back and fix them later so I took a couple of days to eliminate as many issues as I could. Things can always be better of course.
So for the map page, I now need to add in the Media queries for the different mobile devices as well as move the map popups to CSS Grid as well.
Then no matter which device a user is using they should be able to get a nice user experience out of it.
Once I get the whole site moved over to CSS Grid, I will then start rolling out React.js components.
These 2 changes will allow Mapertunity to continue to Grow.
Doug Ayers
Co-Founder,
Mapertunity.com
