Latest Tips
-
Read More →
Check the reason make your page re-render by changed props and state
The approach of the post is we will console.log at componentDidUpdate. Find out the reason make our component re-render (specifically is look for those states and props changed).
-
Read More →
What is the JavaScript ternary operator?
The ternary operator is a shortcut for the if statement.
-
Read More →
What is the promise executor?
The method received as an argument for the promise.
-
Read More →
What is a void operator?
The void operator returns an undefined value from an evaluated expression
-
Read More →
What is a spread operator?
The spread operator is a useful syntax for manipulating arrays and objects.
-
Read More →
What is the difference between Target and currentTarget in the event context?
target refers to the element that triggers an event. currentTarget to the element that the event listener is listening on.
-
Read More →
What is the Temporal Dead Zone?
Temporal Dead Zone is a JavaScript behavior while using variables declared using
letandconstkeywords. -
Read More →
What is a currying function?
A currying function is a function that takes multiple arguments and turns it into a sequence of functions having only one argument at a time.
-
Read More →
What is Functional Inheritance?
Functional inheritance is the process of inheriting features by applying an augmenting function to an object instance.
-
Read More →
What is Functional Inheritance?
Functional inheritance is the process of inheriting features by applying an augmenting function to an object instance.
-
Read More →
Creating immutable objects in native JavaScript
With the latest versions of JavaScript it’s possible to create immutable objects. I’ll walk you through how to do it in three different ways.
-
Read More →
Hash maps without side effects
Create hash maps(without side effects) using
Object.create(null). -
Read More →
Looping over arrays
There’s a few methods for looping over arrays in Javascript. We’ll start with the classical ones and move towards additions made to the standard.
-
Read More →
Immutable structures and cloning
Object cloning is a tricky, full of edge-cases, endeavor. The reason is simple enough. Objects maintain internal state, and that is much abused. There are countless techniques, or better phrased, countless derivations of the same technique.
-
Read More →
Closures inside loops
Closure in a loop is an interesting topic and this is the tip to be a master of it
-
Read More →
Upping Performance by Appending/Keying
React uses a mechanism called reconciliation for efficient rendering on update.
-
Read More →
Improving your Async functions with WebWorkers
JS runs in a single thread in the browser, this is the truth. In this tip I’ll show you how to unleash the full power of asynchronous processing with Web Workers.
-
Read More →
Protocols for the Brave
You might have heard about the old ways gaining hype recently, and we don’t mean praying to the gods of the north. Today we’re introducing a feature found in Clojure which allows you to define interfaces for your classes.
-
Read More →
Adventurers Guide to React (Part I)
So you’ve heard of this React thing, and you actually peeked at the docs, maybe even went through some of the pages. Then you suddenly came across mysterious runes that spelled somewhat along the lines of Webpack, Browserify, Yarn, Babel, NPM and yet…
-
Read More →
VueJS, How VueJS makes a copy-update-replace inside the data binding.
In this tip, I will introduce an example to show you how it might conflict with other software.
-
Read More →
Picking and rejecting object properties
Sometimes we need to whitelist certain attributes from an object, say we’ve got an array representation of a database table and we need to
selectjust a few fields for some function. -
Read More →
Enhancing React components, Composition
React is extremely flexible in terms of how you can structure your components, but this pattern will make your apps more efficient.
-
Read More →
Why you should use Object.is() in equality comparison
A good solution for the looseness of equality comparisons in javascript
-
Read More →
Recursion, iteration and tail calls in JS
If you’ve been on the business for some time, you have, most likely, come across the definition of recursion, for which the factorial of a given number
n! = n * n - 1 * ... * 1is a standard example… -
Read More →
State to Props maps with memory
You’ve been building your React apps with a Redux store for quite a while, yet you feel awkward when your components update so often. You’ve crafted your state thoroughly, and your architecture is such that each component gets just what it needs from…
-
Read More →
Tapping for quick debugging
This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print.
-
Read More →
3 Array Hacks
Arrays are everywhere and with the new spread operators introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming.
-
Read More →
Working With Websocket Timeout
A trick to control the timeout
-
Read More →
Preventing Unwanted Scopes Creation in AngularJs
In this tip I am going to show how to pass data between scopes preventing unwanted scopes created by
ng-repeatandng-if -
Read More →
Binding objects to functions
Understanding how to use
Bindmethod with objects and functions in JavaScript -
Read More →
Three useful hacks
Three very useful and syntax sugar hacks to speed up your development.
-
Read More →
ES6, var vs let
In this tip, I will introduce the block-scope difference between keyword var and let. Should I replace var by let? let’s take a look
-
Read More →
Breaking or continuing loop in functional programming
A common task for us is iterate over a list looking for a value or values, but we can’t return from inside a loop so we will have to iterate the whole array, even if the item we search is the first in…
-
Read More →
Comma operator in JS
When placed in an expression, it evaluates every expression from left to right and returns the last one.
-
Read More →
Copy to Clipboard
This week I had to create a common “Copy to Clipboard” button, I’ve never created one before and I want to share how I made it.
-
Read More →
Create an easy loop using an array
Sometimes, we need to loop endlessly over an array of items, like a carousel of images or an audio playlist. Here’s how to take an array and give it “looping powers”
-
Read More →
How to use optional arguments in functions (with optional callback)
You can make function arguments and callback optional
-
Read More →
Get File Extension
How to get the file extension more efficiently?
-
Read More →
Return Values with the 'new' Operator
Understand what gets returned when using new vs. not using new.
-
Read More →
State to Props maps with memory
You’ve been building your React apps with a Redux store for quite a while, yet you feel awkward when your components update so often. You’ve crafted your state thoroughly, and your architecture is such that each component gets just what it needs from…
-
Read More →
DOM event listening made easy
An elegant and easy way to handle DOM events
-
Read More →
Preventing Unwanted Scopes Creation in AngularJs
In this tip I am going to show how to pass data between scopes preventing unwanted scopes created by
ng-repeatandng-if -
Read More →
Helpful Console Logging Tricks
Helpful logging techniques using coercion and conditonal breakpoints.
-
Read More →
Easiest way to extract unix timestamp in JS
In Javascript you can easily get the unix timestamp
-
Read More →
How to `reduce()` arrays
Some reminders about using
reduce() -
Read More →
Basics declarations
Understand and work with declarations.
-
Read More →
Detect document ready in pure JS
The cross-browser way to check if the document has loaded in pure JavaScript
-
Read More →
Calculate the Max/Min value from an array
Ways to use the built-in functions Math.max() and Math.min() with arrays of numbers
-
Read More →
Know the passing mechanism
JavaScript technically only passes by value for both primitives and object (or reference) types. In case of reference types the reference value itself is passed by value.
-
Read More →
Use destructuring in function parameters
Did you know that you can use destructuring in function parameters?
-
Read More →
Preventing Unapply Attacks
Freeze the builtin prototypes.
-
Read More →
Array average and median
Calculate the average and median from array values
-
Read More →
Using JSON.Stringify
Create string from selected properties of JSON object.
-
Read More →
Advanced Javascript Properties
How to add private properties, getters and setters to objects.
-
Read More →
Flattening multidimensional Arrays in JavaScript
Three different solutions to merge multidimensional array into a single array.
-
Read More →
Deduplicate an Array
How to remove duplicate elements, of different data types, from an Array.
-
Read More →
Observe DOM changes in extensions
When you develop extensions to existent sites it’s not so easy to play with DOM ‘cause of modern dynamic javascript.
-
Read More →
Assignment Operators
Assigning is very common. Sometimes typing becomes time consuming for us ‘Lazy programmers’. So, we can use some tricks to help us and make our code cleaner and simpler.
-
Read More →
Implementing asynchronous loop
You may run into problems while implementing asynchronous loops.
-
Read More →
Create array sequence `[0, 1, ..., N-1]` in one line
Compact one-liners that generate ordinal sequence arrays
-
Read More →
Create array sequence `[0, 1, ..., N-1]` in one line
Compact one-liners that generate ordinal sequence arrays
-
Read More →
Map() to the rescue; adding order to Object properties
An Object it is an unordered collection of properties… that means that if you are trying to save ordered data inside an Object, you have to review it because properties order in objects are not guaranteed.
-
Read More →
Avoid modifying or passing `arguments` into other functions — it kills optimization
Within JavaScript functions, the variable name
argumentslets you access all of the arguments passed to the function.argumentsis an array-like object;argumentscan be accessed using array notation, and it has the length property, but it doesn’t have many of the… -
Read More →
Converting truthy/falsy values to boolean
Logical operators are a core part of JavaScript, here you can see a a way you always get a true or false no matter what was given to it.
-
Read More →
Speed up recursive functions with memoization
Fibonacci sequence is very familiar to everybody. we can write the following function in 20 seconds.it works, but not efficient. it did lots of duplicate computing works, we can cache its previously computed results to speed it up.
-
Read More →
Currying vs partial application
Currying and partial application are two ways of transforming a function into another function with a generally smaller arity.
-
Read More →
Short circuit evaluation in JS.
Short-circuit evaluation says, the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression, when the first argument of the AND
&&function evaluates to false, the overall value must be false,… -
Read More →
Filtering and Sorting a List of Strings
You may have a big list of names you need to filter in order to remove duplicates and sort them alphabetically.
-
Read More →
Using immediately invoked function expression
Called as “Iffy” ( IIFE - immediately invoked function expression) is an anonymous function expression that is immediately invoked and has some important uses in Javascript.
-
Read More →
Use === instead of ==
The
==(or!=) operator performs an automatic type conversion if needed. The===(or!==) operator will not perform any conversion. It compares the value and the type, which could be considered faster (jsPref) than==. -
Read More →
Converting to number fast way
Converting strings to numbers is extremely common. The easiest and fastest way to achieve that would be using the + operator.
-
Read More →
Two ways to empty an array
In JavaScript when you want to empty an array, there are a lot ways, but this is the most performant.
-
Read More →
Shuffle an Array
Fisher-Yates Shuffling it’s an algorithm to shuffle an array.
-
Read More →
Return objects to enable chaining of functions
When creating functions on an object in Object Oriented Javascript, returning the object in the function will enable you to chain functions together.
-
Read More →
Safe string concatenation
Suppose you have a couple of variables with unknown types and you want to concatenate them in a string. To be sure that the arithmetical operation is not be applied during concatenation, use concat
-
Read More →
Truncating the fast (but risky) way
.
~~Xis usually a fasterMath.trunc(X), but can also make your code do nasty things. -
Read More →
Node.js - Run a module if it is not `required`
In node, you can tell your program to do two different things depending on whether the code is run from
require('./something.js')ornode something.js. This is useful if you want to interact with one of your modules independently. -
Read More →
Passing arguments to callback functions
By default you cannot pass arguments to a callback function, but you can take advantage of the closure scope in Javascript to pass arguments to callback functions.
-
Read More →
Even simpler way of using `indexOf` as a contains clause
JavaScript by default does not have a contains method. And for checking existence of a substring in a string or an item in an array you may do this.
-
Read More →
Fat Arrow Functions
Introduced as a new feature in ES6, fat arrow functions may come as a handy tool to write more code in fewer lines
-
Read More →
Tip to measure performance of a javascript block
For quickly measuring performance of a javascript block, we can use the console functions like
console.time(label)andconsole.timeEnd(label) -
Read More →
Pseudomandatory parameters in ES6 functions
In many programming languages the parameters of a function are by default mandatory and the developer has to explicitly define that a parameter is optional.
-
Read More →
Hoisting
Understanding hoisting will help you organize your function scope.
-
Read More →
Check if a property is in a Object
These are ways to check if a property is present in an object.
-
Read More →
Template Strings
As of ES6, JS now has template strings as an alternative to the classic end quotes strings.
-
Read More →
Converting a Node List to an Array
Here’s a quick, safe, and reusable way to convert a node list into an array of DOM elements.
-
Read More →
use strict and get lazy
Strict-mode JavaScript makes it easier for the developer to write “secure” JavaScript.
-
Read More →
Writing a single method for arrays and a single element
Rather than writing separate methods to handle an array and a single element parameter, write your functions so they can handle both. This is similar to how some of jQuery’s functions work (
csswill modify everything matched by the selector). -
Read More →
Differences between `undefined` and `null`
Understanding the differences between
undefinedandnull. -
Read More →
Sorting strings with accented characters
Javascript has a native method sort that allows sorting arrays. Doing a simple
array.sort()will treat each array entry as a string and sort it alphabetically. But when you try order an array of non ASCII characters you will obtain a strange result…. -
Read More →
Improve Nested Conditionals
How can we improve and make a more efficient nested
ifstatement in javascript? -
Read More →
Keys in children components are important
The key is an attribute that you must pass to all components created dynamically from an array. It’s a unique and constant id that React uses to identify each component in the DOM and to know whether it’s a different component or the…
-
Read More →
AngularJs - `$digest` vs `$apply`
JavaScript modules and build steps are getting more numerous and complicated, but what about boilerplate in new frameworks?
-
Read More →
Insert item inside an Array
Inserting an item into an existing array is a daily common task. You can add elements to the end of an array using push, to the beginning using unshift, or to the middle using splice.