DOM access takes a lot of time, you should think about this every time you are programming and optimize your code avoiding unnecessary access.
- If you are going to insert a bunch/list of elements in the DOM and you want to show/insert them one by one, use createDocumentFragment, it’s the fastest way.
- If you want to show/insert them all when they are ready, at the same time, use innerHTML, in this case it will be faster even than createDocumentFragment.
Never use innerHTML when you want to render one by one, it’s the slowest one (DOM access + creation).
If you want test it for your own and see the timing, run the code below with num: 10, 100, 500, 1500.
createDocumentFragment vs innerHTML
/in JavaScript/by GénesisDOM access takes a lot of time, you should think about this every time you are programming and optimize your code avoiding unnecessary access.
Never use innerHTML when you want to render one by one, it’s the slowest one (DOM access + creation).
If you want test it for your own and see the timing, run the code below with num: 10, 100, 500, 1500.
Interfaces Hombre Máquina awarded in the INCENSe II Call
/in Recognition/by GénesisOur Street Lighting System (helioslumen.com) has been awarded in the INCENS II Call. Within the next 6 months we are going to integrate it into the Fiware technology, as well as adapt it to the European markets.
In the photo above there is a part of the team with the Head of Market from Endesa, Javier Uriarte Monereo.
New Helios Marker App
/in App, Design/by GénesisHelios Marker is a full cross-platform app to install devices in our free band smart network.
These are some screenshot examples from the phone app version:
Here is the link to the Gloogle Play Store: Helios Marker
Where to look for the best icons for your apps?
/in Design/by GénesisAbove you can see a basic vector draw in SVG using Inkscape and Material Icons.
You can use it via Google Web Fonts but I would recommend you to self host the font.
When I’m designing some apps I download the SVG icons directly from the Material icons website, then for the implementation I download the font from the Material Icon Font in Github and use them like in the example above (watch the HTML).
Open Sreet Map full of symbols with Open Layers
/in HTML5, JavaScript/by GénesisIn this example we are using OpenLayers (OL) instead of Google Maps API, and OpenStreetMap (OSM) as our map source instead of Google Maps, Bing Maps or any other. OL allows you to use any map source you want to.
It’s is quite easy to set up a functional map with OL. Most of the code here is just to set up different kinds of vector symbols (up to 10000). You can play and change the number of symbols, add/delete symbols and so on, to see the high-performance of OL.