Well this series that I have just planned (out of nowhere) is more than a coding activity. Here I will document my normal day while working as a front end web developer.
Coding:
Looking at the graph, it started to elevate and satisfied my 3 hours pure coding commitment for just two days but didn’t continued. These day I am on preprocessing band wagon. I do code a lot of Jade/Pug and Sass. It’s great to see that 33.58% of coding time is devoted to pure JavaScript, thanks to the side projects.
What I have Discovered:
There are quite a few things that I have learned in the past week. They are listed as
Throttling/Debouncing
Whenever you are in need of attaching resize event to the browser you must throttle or debounce it. First and foremost, Browser resizing will subsequently fire resize which will eventually drop frame rates per second and hence affect the app’s performance. Secondly browser do have inconsistencies in dealing with browser resize. Further explained here and here
Highlight adjacent label
While working with a todo app, the basic functionality you want is to strikethough an item if adjacent checkbox is checked (or a task is completed). I tried to achieve this effect using following Javascript as
inputs.forEach(function(input){
input.addEventListener('change', function(e){
var label = e.target.nextSibling;
debugger;
if(e.target.checked){
label.classList.toggle('hl');
} else {
label.classList.toggle('hl');
}
})
}, true);
Here I am just toggling a class of hl whenever a checkbox is checked. The problem with this approach is that if am selecting all of the checkboxes or all of my tasks by some other means than I have to somewhat rerun the above code because my labels won’t get highlighted automatically. So here is much improved version which is in pure CSS
input:checked + label {
text-decoration: line-through;
}
Find Missing Pseudo Elements
Browsers these days tend to display Pseudo Elements if you bring up the developer tools. Number one reason to find them if they are missing from the DOM is you haven’t specified their content property. If you have specified, for example content:””; chrome will not hide them entirely
VSCODE Sass Peek Definition
Vscode (a lightweight code editor of Visual Studio family) marketplace has a great extension of SCSS Intellisence which does what ever it name suggests. One of the nice feature is peek definition as show in the following picture where I am getting a peek of sass mixin
Conclusion
I hope I have shared enough gems 🙂 with you and hopefully will continue this series. I do need to work on that 3 hour coding goal.