ICONS - How to handle SVG explained

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.

If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

There is no error. When you are using node terminal thingie, it logs result of code you've typed. For example if you type c = 2+2 it will log "4". Its like echo(eval('code'))

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

Arty wrote: Thu Mar 14, 2019 9:02 am When using Iconify syntax: <span class="iconify" data-icon="fa:home"></span> Iconify loads data for images in bulk. Also there are several layers of caching to make sure icons are not loaded on every page load. Its much much faster and more efficient than external images.
Marc wrote: poke
is this something you want to considering doing for 3.3?

based on the tests that I have run on a static page load was not any worse than font-awsome in the new theme, and the codepend integration test only revealed som slight changed to the icons/buttons but the real test would be to test it with prosilver as awhole? It should not be too dificult to switch it. except for the migrationss :D ... But I do not want to wste the time if its not something going into 3.3 basically would wait for icon macro and what not...
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

Arty wrote: @Poke
Had a few more follow-up questions for sustainability.

what is the turn around timeline/process for updating a library?
Lets say mdi gets really active and starts pushing out icon updates once a month or more? What is the update process? How automated is it? does it require someone creating an issue?
What is the impact on the cahcing in this scenario?

Basically trying to understand from a support standpoint if we used this and a user tries to use and icon that is too new, what the metrics would be?

Is it faster/easier if a library were to maintain the collection.json file themselves?
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

hanakin wrote: Wed Mar 20, 2019 5:48 pm
Arty wrote: @Poke
Had a few more follow-up questions for sustainability.

what is the turn around timeline/process for updating a library?
Lets say mdi gets really active and starts pushing out icon updates once a month or more? What is the update process? How automated is it? does it require someone creating an issue?
What is the impact on the cahcing in this scenario?

Basically trying to understand from a support standpoint if we used this and a user tries to use and icon that is too new, what the metrics would be?
Update script is ran few times a day, so whenever any library pushes update, iconify/json repository is updated. From there GitHub hooks are used to notify all servers that there is update, which triggers update scripts and all servers get updated within 2 minutes. Servers are updated without any downtime. So its almost fully automated. By "almost" I mean it can be used as cron job, it requires no interaction, but because I'm still messing with that script I run it from my computer instead of server.

As for caching, it gets a bit complicated. There are several layers of icon caching.

First is session storage where all icons are stored during session. It is cleared when browser is closed.

Second is local storage, but it is disabled by default because it requires cookie consent. However its not really needed. If enabled, it invalidates when Iconify script is updated.

Third is browser caching of API requests. Its basic HTTP caching. Expiration is set to 8 days.

Each Iconify update invalidates session and local storage cache.

If any existing icon is updated (as in changed, not added), in worst case it might take up to 8 days for users to see new icon. If new icons are added, it takes anything from minutes to a day to see new icon (upper limit will be 3 hours when I'll change to cron job).

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

got it thanks. So essentially a non issue for new icons. Once a library is added its all automated from there...Sounds awsome :D
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

Yes. Also when icon is removed, like for example today Dashicons renamed plus-light to plus-alt2, old icon is still available. Update process doesn't simply pull latest icons, it merges new icon set with previous icons set.

If icon is removed, it is marked as hidden. If icon is renamed, old name is added as alias, so icon can be access by old name and new name. So if anyone is using removed or renamed icon, their websites don't suddenly break.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

nice 👍
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

Converted Prosilver for 3.2.5 to Iconify: https://github.com/cyberalien/prosilver-iconify

All FontAwesome stuff has been converted. Most icons have been replaced with similar FontAwesome 5 icons because they are much better designed, some were replaced with icons from different sets.

Forum/topic icons have also been converted. About 130kb of png images have been replaced with 10kb JavaScript.

Forum/topic icons have common parts, so instead of making bunch of icons I've made JavaScript that generates icons from layers (background, content, locked + mine flags). Its work in progress and it is missing "moved" icons for forums because they require different handling of layers, which I didn't figure out how to implement yet. All layers are colorless, color of each layer is controlled from stylesheet. I've posted code for it here: https://github.com/cyberalien/prosilver-folder-icons

There might be some bugs.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

cool...
Arty wrote: Fri Mar 22, 2019 12:29 pm All FontAwesome stuff has been converted. Most icons have been replaced with similar FontAwesome 5 icons because they are much better designed, some were replaced with icons from different sets.
using this as reference

https://codepen.io/hanakin/pen/GPZvev?editors=1100

to make it easier can you fork and update the icons on there with what you used?

Running them side by side locally is a full sec faster to load the main page and half a sec weirdly for large viewforum page. The implementation, sizes and css needs some tweaks still. Thats why i started working on this https://codepen.io/hanakin/pen/oVyvBp?editors=1100. I still need to updated it to 3.2 assets and add in the other areas.

Im also not sure I am a fan of the approach to the imagesets need to investigate more.

But overall looks promising :D
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

hanakin wrote: Fri Mar 22, 2019 3:43 pmusing this as reference

https://codepen.io/hanakin/pen/GPZvev?editors=1100
What is "post icons" section for? I'm confused because that list doesn't match functionality of prosilver.

Post Reply