Using spread operator to split your string

There are two obvious interesting ways to split your string:

If you are interested to use the spread operator, consult the following compatibility tables before you use it in your environment:

Advertisements

Toggle a class value using Element.classList.toggle() method

Instead of using jQuery’s .toggleClass() method to add or remove classes from an element, I can use the Element.classList.toggle() method to achieve the similar goal. The method will return true if the value is successfully added to the element class, otherwise, it will return false.

It’s a perfectly valid choice for a fairly simple application.

What I can do with JavaScript’s Array.filter()?

I wonder what I can do with JavaScript’s Array.filter() and I think there is a lot of things I can do with it.

Filter my list of cars

Filter my list of heroes

Filter my dirty clothes…

Filter my favorite shoes…

Filter my favorite foods…

Filter the candidate to be included in my crew…

I think there is a lot of things we can filter out of an Array. A lot of things…

Have not used Array.filter() before? If yes, then consult the complete reference at MDN.

Make my self aware of different techniques for CSS page layout

I am pretty much beginner when it comes to CSS page layout techniques. Even though I’m comfortable using Bootstrap to do layout elements, but still, there is something missing. Something which I don’t quite understand when it comes to layout elements without relying on a CSS framework. So, I decided to make my self aware of different techniques for CSS page layout.

After I finished reading the Introduction to CSS layout article, I can categorize two ways to do layout:

  • the old-fashioned way
  • the modern way

The old-fashioned way is when using Float and Positioning techniques, while the modern way is using CSS tables (display: table), Flexbox and Grid.

I’m glad to aware there are many options to layout elements, and I am more inclined to deep dive for each of the techniques mentioned before.

Firefox browser console: Hint when there is an error thrown by JS

I rarely use Firefox when working on front-end, but since I read one of an article from MDN, I learned that Firefox browser console will give me a hint when there is an error thrown by JavaScript. See the screenshot below, on the left is Firefox version 58 and on the right side is Chrome version 64.

chrome-firefox-browser-console

I think this nice, and in the future, I will suggesting my mentee to consider to use Firefox in their learning session instead of Chrome, because if there is an error thrown by JavaScript they might be able to figure it out faster.

Shorter path to open up DevTools Console

Working as a front-end developer I frequently using DevTools Console to do almost anything inside the console (e.g. interacting with the HTML document using DOM API).

I usually open up DevTools Console with the following steps:

  1. Pressing this combination of keyboard shortcuts: Ctrl + Shift + I.
  2. Click the Console panel.

 

longer-path-to-open-console

Slightly longer path to open up DevTools Console

 

but, there is a shorter path, just press Ctrl + Shift + J.

Thanks for the universe for pushing me to get better at something, and this article Tools for Web Developers: Using the Console.

Using jsinspect to detect duplicate codes

As a JavaScript software developer, we occasionally find ourselves writing duplicate codes and keep moving forward without even considering to clean up the code. We may also find ourselves working in a codebase without knowing how much of duplicate codes have been written to and not sure where to start the cleanup.

There are tools built specifically to help for this purpose, jsinspect. I found this gem when I watched a talk by Elijah Manor: Eliminate JavaScript Code Smells.

Curious enough to give it a try, I installed jsinspect to see how it goes. I ran the tool to inspect several of my JavaScript files and here is the jsinspect returned in my console:

It’s cool, isn’t it? Imagine if we can tap this tool into build process to keep the codebase as clean as possible. But, if you guys also curious enough about jsinspect like myself, try to use it in your daily workflow, see how the tool can help you find the duplicate code easily.