One year ago endleZZ was conceived in a waiting room with no signal as a way to develop an offline game without any special requirements: just a browser and an .html file.
The idea is great and it’s been useful many times to kill some time, but it really deserved a minimum visual and functional update.
So here it is, version 0.2: anniversary update! 🎉
Content
Web version
You can access the web version that I host in this server:
I was writing a post where I wanted to insert a 3D model to picture it better, and I even thought in doing a viewer myself. But I didn’t have to browse long to find Three.js.
Let's keep with the example and fill up the second <script> block defining a scene with an animated rotating cube:
<script type="module">
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
All of this would look like this:
Add drag controls and background
Now we have a base to work with. We can add some functionality inserting the OrbitControls module.
//Import new modules at the beginning of the script
import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
//then add the mouse controls after declaring the camera and renderer
const controls = new OrbitControls( camera, renderer.domElement );
Also, you can modify the background easily, but you will need to host your images within your app in a server, or run it locally, because of CORS. I will be using the background image of the blog header, which was taken from Stellarium.
First define a texture. Then, add it to the scene:
//do this before rendering, while defining the scene
//define texture
const texture = new THREE.TextureLoader().load( "https://theroamingworkshop.cloud/demos/Unity1-north.png" );
//add texture to scene
scene.background=texture;
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js"
}
}
</script>
<body style="margin: 0; width:100%;height:300px;">
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
const scene = new THREE.Scene();
const texture = new THREE.TextureLoader().load( "https://theroamingworkshop.cloud/demos/Unity1-north.png" );
scene.background=texture;
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
Insert a 3D model
Now let's replace the cube for our own 3D model which, in the case of Three.js, will be a glTF (.GLB o .GLTF) format, that is most supported and renders faster (.fbx, .stl, .obj and so on are also supported).
I will export a .glb of this basic Raspberry Pi 4B case that I did some time ago using Blender:
Now, replace the <script> block based on the "webgl_loader_gltf" which was shown at the start of the post:
If you want to check some of the tracking that websites do while you browse, make this simple experiment:
Open the browser inspector with Ctrl+I or right click and “Inspect”
Open the “Network” tab.
Now refresh the main page of this blog.
This is what you’ll see: just 8 files that load all what’s needed to browse this blog.
Now open any other website that you use to visit and observe the content that’s loaded.
I’m going to visit amazon.es without any further interaction. Just see there’s a file at the end being created every couple of seconds /1/batch/1/OE . Now move the cursor without scrolling the window. The new files will show a variable t for the time you’ve been on the site, and coordinates x and y that show where you place the cursor. This is just an example of how tracking is used very often: where did you access the site from, what you click, what you see, where you stop, you IP, geolocation… There’s nothing of that in here.
This is only Amazon and its AWS. Google tracking shows up as its famous “analytics” or “collect” files in the Network tab as well.
It’s often said that the simplest is the best solution, in fact, you’ll see in this blog that you don’t need so many frills to publish a website. So don’t trust complicated sites, with never-ending “partners” lists and with Google Analytics or Amazon Web Services.
One of my latest projects is a notes app that is hosted in my server so I can stop using [G] Notes.
An interesting feature that I am including is Rich Text Editor, a rich javascript library in the form of user interface to format HTML text of any web form.
It’s open source, free for personal use, and very simple to use. A true win-win that I’m showing you today.
Content
License
I said Rich Text Editor is free, and it is for a non-commercial use.
It's important that you read their pricing page to understand the limitations of the free license:
1 developer
1 domain
5 active users
In my case, I installed Rich Text Editor in this server that hosts the blog, and it's been restricted with php so it's only accessible from the same domain.
TIP! Do NOT host the files anywhere accessible for anyone (like a public server), as you might lead to a license break, being forced to pay a standard license or retiring your app.
Anyway, commercial licenses are one-off payments and it might be worth getting one if you're going to give it plenty of use.
Installation
Using Rich Text Editor is very simple and it's explained in their document page.
To install Rich Text Editor you only need to download the files from their website in a local folder or in your web server.
One basic funcionality is to capture the full HTML code for the text that we have been editing. That's what the button at the bottom does, using the getHTMLcode():
<button onclick="alert(editor1.getHTMLCode())">Show Html Code</button>
Uses
As stated previously, I'll be using this library as an editor for a notes app that will be hosted in my server.
The editor will let me easily add nice formatting to the notes and save them with the full format code.
Here you have a demo of how the interface is looking, although there are no functions enabled so far.
Other applications where you can use this editor are self-made forums, user forms, comments boxes or any text-box where a user needs to input text in your web app.
I hope you found this useful as I did and give it good use. Any doubts or comments, drop them on Twitter 🐦 See you soon!
To avoid the use of unnecessary external plugins, here you’ll see how to make your own widgets for your WordPress site or to insertthem in any post.
All you need to know is some HTML and javascript. Let’s get down to it!
Content
Custom HTML
If you've seen any other post in this blog, you've seen the table of contents above, or the cookie message to the right.
Both are dynamic elements programmed in HTML and javascript which you can insert anywhere in your WordPress site using a "Custom HTML" block.
Just insert this type of block and inside you can introduce a customizable HTML and program with javascript. Let's see a couple of examples.
Cookie notice
The sidebar in this blog shows a cookie consent message with a hyperlink to the privacy policy.
You might have noticed that the content changes automatically when you switch languages.
Right click to inspect the website structure.
For it to work properly, imagine that the Custom HTML block is an iframe or some kind on sub-site inside this website.
You can edit the content of the Custom HTML as if it was an external site, and freely add anything you want.
For the cookie notice I just want a line of text, and I assign "cookie-txt" as an id. It is good to add the HTML structure, but you can avoid most of it.
Now I add a javascript function which reads the site language and fills this line according to it.
You can do different tests using the inspector and console of your browser, right-clicking in the webpage.
A fast way to get the language is reading the lang property of the <html> element of the site.
The rest is a condition:
If it detects "es-ES", message is defined in Spanish.
If it detects "en-GB", message is defined in English.
The content of the message is defined in the innerHTML property of the <p> element, so it can be formatted with HTML tags adding a hyperlink or bold text.
<script>
var lang=document.getElementsByTagName("html")[0].lang;
if(lang=="es-ES"){
document.getElementById("cookie-txt").innerHTML="🍪 <a href='https://theroamingworkshop.cloud/b/?page_id=1225' target='_blank'>Política</a> <b>anti-Cookies</b> aceptada al navegar.</p>";
}else if(lang=="en-GB"){
document.getElementById("cookie-txt").innerHTML="<b>🍪 anti-Cookies</b> <a href='https://theroamingworkshop.cloud/b/?page_id=3' target='_blank'>policy</a> accepted while browsing.";
}
</script>
It would look like this:
The full code of the Custom HTML block showing the cookie notice is the following:
<html>
<body>
<p id="cookie-txt"></p>
</body>
<script>
var lang=document.getElementsByTagName("html")[0].lang;
if(lang=="es-ES"){
document.getElementById("cookie-txt").innerHTML="🍪 <a href='https://theroamingworkshop.cloud/b/?page_id=1225' target='_blank'>Política</a> <b>anti-Cookies</b> aceptada al navegar.</p>";
}else if(lang=="en-GB"){
document.getElementById("cookie-txt").innerHTML="<b>🍪 anti-Cookies</b> <a href='https://theroamingworkshop.cloud/b/?page_id=3' target='_blank'>policy</a> accepted while browsing.";
}
</script>
</html>
In this case, the block is inserted as an element in the sidebar:
Table of contents
The table of contents that appears in every post is done in the same way.
Firstly, I will define the table giving it some format and leaving the content empty so it's filled later by a function.
<div id="menu" style="padding:20px 20px 20px 20px; border-left:2px solid darkgrey;">
<p style="font-weight:bold;">Contenido</p>
</div>
In this case, I will search for "headings" or titles of each section, specifically for <h2> tags. For this reason, when writing every post I must always use this type of heading (which is default) if I want it to appear in the table.
Additionally, I define the html Anchor property, which will assign and "id" that will allow to create a hyperlink that takes us to that heading.
Then a function will do the following:
Search for <h2> tags one by one. for (let i=0;i < window.document.getElementsByTagName("h2").length; i++) { element = window.document.getElementsByTagName("h2")[i]; ...
Get the text inside. text = "▹ "+element.innerHTML;
Create a new hyperlink (<a>) element which will go in the table of contents, with the previous text. var newelement = document.createElement("a"); newelement.innerHTML=text;
Get the post "id" and heading "id" to create a hyperlink to this heading. var postid = window.document.getElementsByTagName("article")[0].id; var url = "https://theroamingworkshop.cloud/b/?p="+postid.substr(5,postid.length)+"#"+element.id;
Insert it as a new child in the table of contents. newelement.setAttribute("href", url); newelement.appendChild(document.createElement("br")); window.document.getElementById("menu").appendChild(newelement);
TIP! Adding #section-id at the end of any URL it will take you to such section.
Finally, some pages take a bit of time to load and the headings wont be available, so I'll add the previous code inside a function and call it using a timeout. window.setTimeout(fillmenu,500);
The full code for the block will be like this:
<div id="menu" style="padding:20px 20px 20px 20px; border-left:2px solid darkgrey;">
<p style="font-weight:bold;">Contenido</p>
</div>
<script>
var text;
var element;
function fillmenu(){
for (let i=0; i<window.document.getElementsByTagName("h2").length; i++){
element = window.document.getElementsByTagName("h2")[i];
text = "▹ "+element.innerHTML;
var newelement = document.createElement("a");
newelement.innerHTML=text;
var postid=window.document.getElementsByTagName("article")[0].id;
var url = "https://theroamingworkshop.cloud/b/?p="+postid.substr(5,postid.length)+"#"+element.id;
newelement.setAttribute("href", url);
newelement.appendChild(document.createElement("br"));
window.document.getElementById("menu").appendChild(newelement);
}
}
window.setTimeout(fillmenu,500);
</script>
TIP! Add this HTML block to your reusables and you can insert it in any other post.
TIP! block
TIP! This TIP! block is another example. You'll have to convert it back to a regular block if you want to change the content only in this inserted block.
Here's the code:
<p style="border-left:3px solid orange;padding-left:5px;font-size:14px;"><i><b>TIP! </b>This <b>TIP!</b> block is another example. You'll have to convert it back to a regular block if you want to change the content <b>only</b> in this inserted block.</i></p>
Conclusion
As you can see, there are unlimited possibilities and it's up to your imagination.
Be creative and design your own widgets, they will add value to your blog!
As always, doubts or comments on Twitter 🐦 See you soon!
