Today I had a code review with an employer.
I needed to present my latest project. This is Gazetteer project. I wrote in js with PHP backend.
The review was unsuccessful… The reviewer said me the project not start at all… He used Google Chrome browser. I quickly checked and everything run well even on Chrome without any error on console. I do not understand what was the problem… May I ask the community to take a look to my project please and send me feedback if you see any error on the console. I have got another chance, tomorrow I can present again my project. I checked on Opera, Firefox, Chrome and Edge… No error and runs well…
No, this is an on-line map. Like the google map. If you don’t want to approve your geolocation you can take a look at the non-secure version: http://…
I use the geolocation api in this project. The geolocation api works only on secure site (https).
Nicely done. It looks to be working pretty well. Don’t really know anything about the code obviously. It looks like plain JS and jQuery which is surprising for this type of app.
I do think the UI/UX needs a little love but that is to be expected. It takes a ton of work and isn’t something you really want to tackle on top of everything else. One thing I would suggest is to keep the original icon for the favorites and (somehow) add the heart to the existing icon. Otherwise, I can see it getting difficult knowing at a glance what “thing” each favorite is.
Great job.
Can I ask why it isn’t built using a framework, was that a requirement?
I used jQuery, because that was the requirement… The code still private because that also was a requirement, but if the review will unsuccessful tomorrow, then I will turn public the repository and share the code with the community. I needed about 1 and half month to finish but I coded next of my full time job, after work… So I think so any similar project coding time is about 2-3 weeks…
For favourites: I created 3 different group for the POI’s. The second menu is where you can manage them. If anything not interest you, just simple switch off. The project use localStorage to remember your settings. If you reload the page, any non-interest POI’s remained hidden. At first time a leaved the favourites individually on the map, but later pushed to a group because if have more than a few very confusing when the map is zoomed out. And this is the reason why I implemented a “delete” button on popup too. If the poi cover anything on the map but we don’t want to hide permanently, with the delete button we can disappear to see what is behind them…
Anyway there is a lot of nice possibility in the project. I am most proud of the search engine.
First menu → Set new Location → From Address
Example choose the country: United Kingdom
If you know nothing else but the name of your searching, then leave empty City and Post code. In the Street field enter what you are looking for… (Eden project, Buckingham palace, or just simple Taj Mahal if you don’t know even the country. The searching will do the rest… nice.
Can you tell me what chrome version did you checked? I have latest upgrade (Version 91.0.4472.124 (Official Build) (64-bit)) and the app run without error. Maybe the my reviewer use any older version?
What error did they find? I mean I didn’t really test the app that thoroughly or anything so it’s very possible that it has some bugs. I might have seen one where one of the buttons didn’t seem to do what it should, but I can’t remember which one or how I made it not work.
So I just tested something. If I make something a favorite, click the icon, and then the directions button, I sometimes get an error.
Uncaught TypeError: Cannot read property 'error' of null
Can I ask if it is just because you have to show you can work without a framework or is it because that is how they code their apps still?
Because, I can see it being useful to see some plain JS and all, but I wouldn’t ask people to code something this complex in plain JS and jQuery just to test for that. Not that I’m in a position where I have to make such calls and maybe I’m just not qualified to make such a statement, but it does strike me as a bit odd to be asked to code something this complex in plain JS. I mean this type of app is ripe for a framework. So it just seems like a possible odd choice for testing for plain JS skills (to me anyway).
One known issue is when you click on a POI and you don’t close it with the button or click on an empty place on the map but click another POI, the previous popup closed automatically and the next one open. At this situation the second popup buttons don’t work. I know why but I did not find any usable solution how to bypass this issue…
jQuery was the requirement to write this project with PHP cURL requests… I think so the company use jQuery-PHP-MySQL stack (in this project I did not use database, I used instead JSON files on the server and also on localStorage.)
If you have a good knowledge using React, than you can find easily job (I think so…). Unfortunately I don’t like React, so I focused to use plain js. My opinion is: if you have strong plain js knowledge, you can use easier any other framework, or can learn faster. But without this one also can be React expert example…
Oh, and the issue afternoon: The reviewer told me the page don’t load in at all. Only the preloader spinning on the screen. I asked them which browser he use, and he said: Chrome… I quickly checked the app is works on Chrome me, and yes. On my computer works perfectly in all major browser. So maybe he use any older version chrome…
The people I know that are good at React are also very proficient in plain JS. Maybe not as much at DOM manipulation (or just rusty at it) but still very proficient.
I don’t think React can be used as a shortcut to avoid having a good base foundation of JS knowledge. It’s just a tool to give you better abstractions which can help make the code cleaner and more reusable. For anything really complex you will need some type of abstraction anyway and then you just end up coding your own framework in the end.
Personally, I would be hesitant to work on anything complex only using plain JS and jQuery. In my opinion, that is just asking for trouble in the long run. It might work today, but two years down the road when you have added 10x the features, it’s likely to be much more of a mess.
Frameworks try to be neutral and shouldn’t care about the implementation details. With your own “framework”, it’s easy to succumb to the temptation of creating some coupling with the implementation. So “how you are doing something” becomes coupled with “what you are doing”. That is, the implementation details begin to erode into what should preferably be a neutral abstraction that should work well on any project, not just the one you are currently working on.
Also, any type of team effort is greatly enhanced by the common ground a good framework can provide. It is much easier to work with a large team using a good framework.
TL;DR I would suggest you give React a second chance. Or look at Svelte (or Vue), Svelte has a very plain JS feel to it which you might like if you give it a chance.
I see a map and a place marker, which displays a heart icon when clicked.
I blocked the location request, but it seems to get my location anyway (IP address)? Glad I’m using a VPN.
I’m not sure how to set a new location. clicking on the map does nothing, and neither does trying to drag the place marker.
If geolocation not allowed, then the location computed from IP address. And the navigation use mobile GPS. To set new location, first you need to click on the first menu. This modal splitted two section:
Selected position: this section show your current selected position (by default your location)
Set new Location: here you can find 4 or 5 button: The first one is the ‘From the Map’. Click on it and click on the map to choose another position. Now you have to confirm one more times your choosing. At this point all data will be refreshed and you get a lot information around the selected position. The rest of buttons do the same but with different behavior: relocate your selected position and give you info about the area…
I wanted to create an app to help the user to discover the surrounded area. Example when you take a trip and don’t know what are near you…
The local weather and also the wikipedia api is part of the FCC curriculum.
I don’t understand why is the huge resistance about the geolocation. I think so this is the part of the modern apps.
And at least just one question. What should you do if you need the create any similar project but you know the user easily denied to share geolocation? One opportunity to popup an error box and inform the user, without geolocation the app not works. Another one is to use IP address. I choose the last one…
And anyway: the geolocation api has about 20-100 meter accuracy. IP address has about 3-100 km (!) accuracy.
Only if you switch on the device’s navigation works perfectly the geolocation (5-10 meter accuracy).
nice.