Hi all,
We need your help!
A few weeks ago we uploaded our HTML template (https://antares.pixel-spin.com/) after 2 weeks of waiting the item was soft rejected due some small things which we all fixed.
After that we got another soft rejection containing new points which we also fixed, but after this a new reviewer took over and we got a big list of again new points these where the points:
- PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc. For best performance and concise code use event delegation whenever possible: http://code.tutsplus.com/tutorials/quick-tip-javascript-event-delegation-in-4-minutes--net-8961 2. JQUERY PERFORMANCE NEEDS IMPROVEMENT: Your jQuery code can benefit from some performance tweaks. Please make sure that your jQuery is properly formatted, commented and that you are caching and chaining whenever possible. For more information please read: http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551 3. TYPOGRAPHIC HIERARCHY: The typographic hierarchy of this item requires additional work. For more information, please read: http://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636 4. VISUAL HIERARCHY: The visual hierarchy of this item requires additional work. Focus on better defining which areas of this item should demand more attention and creating a logical structure to the design. For more information, please read: http://webdesign.tutsplus.com/articles/an-introduction-to-hierarchy-webdesign-14947 5. SPACING AND ALIGNMENT: There are spacing and alignment issues in this item. Please make sure that all elements are aligned properly and spacing is consistent from section to section. Here are some articles with more information regarding negative space and proper spacing: http://webdesign.tutsplus.com/articles/using-white-space-or-negative-space-in-your-designs--webdesign-3401,\ http://webdesign.tutsplus.com/articles/adding-space-to-your-designs--webdesign-14836 6. COLOR PALETTE: The chosen color palette requires additional work. For more information, see: http://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437 7. TYPEFACE: The choice of typeface should support the purpose of the design and by extension, the needs of the intended audience. Ref: https://designschool.canva.com/font-design/ 8. FONT COMBINATIONS: It’s recommended that you pair complementary fonts that add to the design aesthetic you’re going for. In general, a design should utilize less than three (ideally two) font variations that each compliment another — not compete for attention. Ref: https://designschool.canva.com/blog/the-ultimate-guide-to-font-pairing/ 9. LOW CONTRAST: Please increase the visual contrast of the following elements, which will drastically improve legibility and readability. Ref: https://www.nngroup.com/articles/low-contrast/
At this point we where a bit puzzled since the first reviewer never said anything about those things, but we did fixed all those things and replieded with:
- PROPER EVENT BINDING ------------------------------------------------------ We already use the on method for all of our events, in the core and in the plugins. Where possible we also use event delegation (for example with the tabs and accordions) but this can’t be used for everything since all elements are build to be placed anywhere where needed so most of the time you don’t know the wrapper element to delegate the event to. The only way to delegate more events without losing the flexibility would be delegating the events to the body element but this hase two issues: -It would require multiple of the same type events so you can’t stop propagation anymore. -The body element is a top level element so it still needs to search almost the entire dom and you would not have any performance improvement unfortunately. 2. JQUERY PERFORMANCE NEEDS IMPROVEMENT ------------------------------------------------------ There are comments throughout the js file (the core file since the plugin files are just supported plugins not developed by us but used under there open source licenses) And formatting is done using the .editorconfig file (http://editorconfig.org) We also have caching in our core js file wich is the equivalent of chaning since chaning is nothing more then using the retun value of a jquery function (wich is the object itself) I do know the article (https://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551) but please keep in mind that this is an article from 2009 with content from 2008 so almost 10 years old! These are the things mentioned in the article: 1. Always Use the Latest Version We do use jquery 3 2. Combine and Minify Your Scripts All our scripts have a minified version we did not combine our scripts since you don’t want to load every .js file on every page this can better be archieved by using a combine script on the live server that can be automated with many popular systems (for example wordpress, silverstripe, symphony and many more) our even beter using google pagespeed (see our live demo) 3. Use For Instead of Each This is something that can make a difference for many of elements (read 100.000+) but since all small things can help i replaced the each loops for for loops except for the filter that benefits from the scoping of the each loop. 4. Use IDs Instead of Classes Id’s isn’t realy an option for many dynamic elements without the use of custom code with is outside of the scope of a template, the choice we made for this template is making it as easy as possible for the developers that end up using it and we archieved this by making the javascript flexible through the use of data attributes (data attributes where not supported at the time the article was written almost 10 years ago) this way developers do not need any custom javascript but still have the flexibility to combine a lot of options see for example the data-toggler function. Since the article is written much is changed see for example this page on the jquery website itself: https://learn.jquery.com/performance/optimize-selectors/ as stated there: “Selector optimization is less important than it used to be” thanks to the querySelectorAll 5. Give your Selectors a Context In my experience it is really annoying if a template uses fixed id’s since many cms and frameworks generate id’s for elements and an element can only have one so if a template uses fixed id’s you always have to make changes to the template code to make in work in a cms. And if a template uses an id to select elements for javascript then the end developer isn’t flexible anymore with the placing of the elements. 6. Cache. ALWAYS. We do
7. Avoid DOM Manipulation We use it only when there is no other option and never in a loop. 8. No String concat(); Use join() for Longer Strings This isn’t used in the template 9. Return False It is bad practice to use return false as this can mess things up when an element has multiple events, see the official w3 website: https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation you have to use preventDefault on the original event 3. TYPOGRAPHIC HIERARCHY ------------------------------------------------------ We’ve added more default typographical differences between titles. The concept of our theme also gives the user the oppurtinity to add more style differences like colors and sizes by adding distinctly named classes like “color-primary” or “text-uppercase”. 4. VISUAL HIERARCHY ------------------------------------------------------ We’ve changed several typographical settings and colors which provide a more clear hierachy. Incidentially, the link provided is broken. It should be http://webdesign.tutsplus.com/articles/an-introduction-to-hierarchy-webdesign-14947 5. SPACING AND ALIGNMENT ------------------------------------------------------ Our theme supplies a default spacing for all elements. There is always a base “medium” (usually around 30 pixels for elements and around 90 for section blocks) spacing which can be overwritten with a larger or smaller version if wanted. We’ve provided examples of this in our demo’s. Example image: https://antares.pixel-spin.com/envato/antares/spacings.png 6. COLOR PALETTE ------------------------------------------------------ We’ve changed our colors to the options provided by http://www.flatuicolorpicker.com/ to ensure a more distinct and harmonious color palette. Example image: https://antares.pixel-spin.com/envato/antares/colors.png 7. TYPEFACE ------------------------------------------------------ We have chosen new fonts that are better paired based on the information provided at https://designschool.canva.com/blog/the-ultimate-guide-to-font-pairing/ 8. FONT COMBINATIONS ------------------------------------------------------ We already use only two typefaces for text. A third font is only used for icons. Also as explained above (7. TYPEFACE) we’ve changed our fonts to form a better pairing. 9. LOW CONTRAST ------------------------------------------------------ Can you tell us which elements you’re referring to? We’ve increased our medium grey color and changed some elements to different colors in various demos. As far as we can see all low contrast elements are now fixed. Example image: https://antares.pixel-spin.com/envato/antares/colors.png
But it still isn’t enough, it is soft rejected again but this time we only got this message:
- THE CHANGES ARE NOT ENOUGH: Unfortunately, the changes are not enough and the previous review still stands. Please carefully check your item to make sure all problems were adequately addressed before resubmitting this item.
I also don’t understand the two javascript issues, there are issues that where issues years go but a lot is changed, for example the event delegation is a great tool but only for specific situations in many situations it would actually decrease performance see for example: https://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document
And the performance tips are also very out dated, some examples:
-Jquery each loop vs js each loop has a minimal performance difference (read: < 0.5ms on big loops)
-ID vs class selectors: even the official jquery website states that this isn’t a issue anymore: https://learn.jquery.com/performance/optimize-selectors/
Things like this give the idea that the reviewers’ knowledge is not up to date wich result in a lower code quality on the marketplace.
Does anyone have any ideas about what is wrong with our template?
Any help/feedback would be greatly appreciated!