In the previous project, I had created a new branch to make changes to the code.
Today I merged that branch with the master.
To merge a branch, checkout into the main branch you want to keep
and then type
git merge secondary-branch-name
in the terminal
HTML & CSS
The for property of a label binds the label to the element it is meant to address.
<label for=“specifies the element this label is bound to”>
Writing CSS for the page, it reminded me to use
*{
margin:0;
padding:0;
}
If we don’t do this, sometimes we get a scrollbar on the browser window because something somewhere started with a non-zero margin or padding.
It also reminded me to put a ./ at the beginning of every path (as in the 'img src' path in this case).
I have encountered situations where I specified the entire path without the prefix given above and the library or plugin just wouldn’t work.
I learned about a new input type, 'range', which is basically a slider that has a default “value” a min value and max value.
<input type=“range” min="10" max="100" name="blur" value="20">
Notice that the min and max values have to be in quotes
data-sizing is a custom attribute we used in this project.
I learned about another input type, called color.
<input type=“color” value=“ffc600>
Can we change the color of the slider in range?
Probably. The slide itself is called ‘track’ and the bob is called ‘thumb’. These can be controlled only by using browser prefixes.
input[type=range]::-browser-prefix-thumb
{
background: coral;}
I tried doing it without prefixes but it didn’t work, so I left it at that.
To scale the inputs down, I just put a width to 'input' elements
input{ width: 100px; }
JS
CSS variables! Doesn’t that sound great? It’s a new feature.
And though SASS can have variables, they after processing get cast into something fixed and not dynamic. That’s how CSS variables differ from SASS variables.
I learned about :root, the selector for the base element in HTML.
You need to declare the variable on some element. And we will do that on :root
So basically, we declare all the variables in :root
For example,
:root{
—blur: #ffc600;
}
and wherever we want to use the CSS variable, we use
var(—variableName)
For example, for blur, we could use
filter:blur(var(—blur));
querySelectorAll(); does not return an array. It returns a NodeList which is like an array but without most of the functions in the prototype.
Once again, it reminded me that you can’t use forEach on its own. It has to be with some element. Like input.forEach();
I learned about mousemove event. The second M is not capital
Just like we learned about transitionend event in the previous project.
this.dataset returns all the “data” prefixed properties and their values
And finally, a bunch of new terms in
document.documentElement.style.setProperty();
What is documentElement?
From MDN, we find out:
document.documentElement returns the root element of the document for example, the HTML element for HTMLdocuments.
style.setProperty() takes in the name of the property, for example, the “name” attribute assigned to an input, in our case spacing|blur|base, and takes in the value for that element, as in, the value assigned to the “value” attribute in that element. The value also must have a unit-suffix if it applies (like px, s, pt, etc.).
And that's a wrap up :)
Hey Arjune:
ReplyDeleteThanks for these summaries! I'm reading them as I work my way thru JS30. I would add a bit more info about datasets as they seem very useful:
Datasets includes everything on an Element that has "data-" property.
E.g:
div class="controls"
input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px" data-greatDog='Mable' data-duh='duh'
/div
const inputs = document.querySelectorAll('.controls input'); //Select all the inputs
function handleUpdate() {
console.log(this.dataset); // Echo values 'data-' properties.
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
//DOMStringMap {sizing: "px", greatdog: "Mable", duh: "duh"}