The Items component has a method that when called can affect sibling components. For example, if an item marked new is set to hidden, we need to update the current new Items component to remove it and also update the hidden Items component to show it.
Events are an ideal way to achieve this, but how do we dispatch an event to a sibling, rather than a parent-child relationship? Easy:
In the update method emit an event on the root component:
this.$root.$emit('updateItems');
And in the mounted() method of the Items component add the event handler:
The correct way to inject HTML formatted data into a Vue component is to use the v-html property on the element:
<p v-html="my_variable"></p>
However, this doesn't support the usual way to use a filter:
<p>\{\{ my_variable | my_filter\}\}</p>
In the above example, the filter would be applied and the HTML escaped. Not what we want. Logic would say put the pipe and the filter in the v-html property, but that fails.
The way to do it is to call the filter explictly as a method on the data:
Another experiment I did way back to create a contextual clock in html/css/js, originally in jQuery but now updated to vanilla javascript. Source available on Github.
The clock itself is a table of cells containing a single character, each with its own ID. Rows have letters and columns numbers.
With this we can create the words and numbers as strings of IDs separated by commas. Because arrays are zero indexed I'm explicitly setting the hours so the array key matches the hour (eg. [1] = one):
var itis = "a1,a2,a4,a5";
var a = "a7";
var ten = "a9,a10,a11";
...
var hourwords = new Array();
hourwords[1] = "d1,d2,d3";
hourwords[2] = "d4,d5,d6";
...
Before we update the time it's important to clear the board. To do this we loop through all the <td> elements, ensure each has a numeric key and remove the CSS class 'alight':
function clearBoard(){
var alltds = document.getElementsByTagName('td');
for (var index in alltds) {
if(!isNaN(parseInt(index, 10)) && alltds[index].classList.contains('alight')){
alltds[index].classList.remove("alight");
}
}
}
To determine which words to light up we create an empty array to hold the words, then use an instance of the Date object to get numerical representations of the hour and the minutes:
var words = new Array();
var now = new Date();
var hour = now.getHours();
var mins = now.getMinutes();
The following is a little bit of a hacky approach but it avoids complicated if statements. Each case tests which five minute bracket the current minutes falls in and adds the relevant words to our array:
switch(true){
case (mins >= 55): words = [five, to]; hour++; break;
case (mins >= 50): words = [ten, to]; hour++; break;
case (mins >= 45): words = [quarter, to]; hour++; break;
case (mins >= 40): words = [twenty, to]; hour++; break;
case (mins >= 35): words = [twenty, five, to]; hour++; break;
case (mins >= 30): words = [half, past]; break;
case (mins >= 25): words = [twenty, five, past]; break;
case (mins >= 20): words = [twenty, past]; break;
case (mins >= 15): words = [a, quarter, past]; break;
case (mins >= 10): words = [ten, past]; break;
case (mins >= 5): words = [five, past]; break;
case (mins < 5): words = [oclock]; break;
}
Because Javascript's Date object returns hours in twenty-four hour format we have to do a little maths to change things to twelve hour format.
Now it's just a case of pushing the words 'it is' and the current hour to our words array. Looping through each word then splitting each word by the comma to get each cell ID. With this we can set the class to 'alight'.
To get this all running we fire the showClock() function. To update it we run a function every five seconds to see if the current minutes is a multiple of five and if so, run the showClock() function again.
This is an old experiment I did where I had my face follow the mouse around the browser document. Originally I wrote it using jQuery, but I've updated it to vanilla js. Source available on Github. You can access it on its own here: Physiognomy - A JS experiment.
Step one is to create an image with the nine different head positions:
Next create a function to take the mouse position and image position which will then be fed to another function which calculates which image to show. imagew and imageh are the size of the final element, in other words should be a third of the height and width
function changeFace(mousex, mousey, face_id){
var face = document.querySelector(face_id)
var imagew = 160;
var imageh = 160;
var facepos = { // image position
top: face.offsetTop,
left: face.offsetLeft
};
face.style.backgroundPosition = calucateBp(imagew, imageh, mousex, mousey, facepos);
}
Next create a function to calculate which the CSS background-position and return it. This looks complicated but should be self explanatory. Each if statement tests where the mouse is relative to the element and sets the background-position accordingly.
Note.offsetTop and .offsetLeft return the offset relative to the parent element, not the document. Some extra maths are involved to allow for this if the element isn't at the root of the DOM.
In these days of cloud storage, file synchronisation, and sharing on social media it's more important than ever to properly name files.
Spaces make sense in written language but computers don't like them. Try to use a space in a filename in a URL and it'll replace it with %20. Try to do anything on the command line and you'll have to wrap the filename in double quotes.
The two common conventions are underscores (_) and hyphens (-). One convention used commonly in Unix/Linux filenames is to use underscores to separate words in the file title, and hyphens to separate the title from version number. For example Apache modules take the form of file_name-version.extension, eg. mod_ftp-0.9.6.tar.gz.
Turns out if your filename is ever to be processed by a regular expressions (such as by the Google indexer!) the underscore will be removed and filename concatenated. When using the the \w operator to find words the underscore is ignored, but the hypen is not.
Always use dashes in filenames instead of spaces or underscores.
