createDocumentFragment vs innerHTML

/in /by

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.

Open Sreet Map full of symbols with Open Layers

/in , /by

In 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.

Draggable marker in Google Maps without API Key

/in , /by

There is a really good documentation about how to use Google Maps API, many of the Google examples are with an API Key but you don’t need it. Use the API Key if you want to monitor your apps or if you want to buy additional usage quota (less than 2.5000 loads per day it’s free).

All Maps API applications should load the Maps API using an API key. Using an API key enables you to monitor your application’s Maps API usage, and ensures that Google can contact you about your application if necessary. If your application’s Maps API usage by exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota.

So, for this basic example, we use Google Maps API without Key to add a draggable Marker in a map that is always centered on our marker position.

CSS zoom

/in , , /by

Easy zoom in, zoom out, normal zoom and zoom adjusted to the container with CSS and JS.

If you want to change the zoom, just add or subtract from the original zoom CSS property.

document.querySelector("#zoomin").addEventListener("click", function() {
    $area.style.zoom = Number($area.style.zoom) + 0.2;
});

You can also set up maximum and minimum values to avoid infinite zoom.

To adjust an area or image to your container you need to divide the width or height depending of what you want to adjust.

document.querySelector("#zoomfix").addEventListener("click", function() {
    $area.style.zoom = $container.offsetWidth / $area.offsetWidth;
});

Here a real example:

Would you like to start with web development?

/in , , , /by

UPDATED: 2022-05-06

If you don’t know anything about programming but you would like to start creating your own webs, desktop or mobile apps from scratch, I’m here to help you out ^^

Break the ice with a short fun history about JavaScript and the Web

  1. From undefined to something.js

Here we go, our first real code contact! You can start doing these fantastic courses from CodeAcademy (guided step by step, interactive and very basic)

  1. Introduction to HTML
  2. Introduction to CSS
  3. Introduction to JavaScript (and intermediate)

Follow with these complete courses from W3CSchools (a wider guide with many examples)

  1. HTML – The language for building webs
  2. CSS – The language for styling webs
  3. JavaScript – The language for programming webs

Don’t worry if some concept are repeated, you need to consolidate, humans learn buy doing.

Another really good option is Mozilla Developer Network (shared knowledge for the Open Web) and all courses about Web Technologies where you can find a wonderful documentation, tutorials and tools. Everything very well structured and in many different languages with the chance to dive deeper into Web Technologies.

After doing CodeAcademy, W3CSchools courses and having taken a glance to MDN I would recommend you to watch this YouTube tutorial: Understanding the Weird Parts of JavaScript. It’s also really basic but it explains some aspects under the hood of JS. This guy made a really good presentation, one of the best videos about JS I’ve ever seen. You can complete his course on Udemy.

After consolidating a good base:

  1. Functional Programming with JavaScript (mandatory)
  2. Understanding the even loop (mandatory)
  3. CSS Grid
  4. Svelte
  5. Some of my tricks

Things are as easy as you want them, the knowledge should be open and free for everyone. There are many genius out there and most of them cannot afford their studies, even if they are public. Do not keep your knowledge for you, spread it out together with your ideas to build a better world 🙂