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:
And in the mounted() method of the Items component add the event handler:
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:
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;
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
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.
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.