facebook-squared twitter-squared rss-squared gplus-squared

Wednesday

15

February 2017

0

COMMENTS

Coding Activities for Week 07 2017

Written by on 15 February 2017

technbuzz week 07 2017 frontend development coding activity

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

vscode sass scss peek definition

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.

Leave a Reply

%d bloggers like this: